1. Некоторые методы для реализации предварительного просмотра изображения.
После понимания методы на самом деле похожи. Вероятно, есть следующие способы:
① Подпишитесь на событие OnChange of Input [type = file].
Как только выбранный путь изменяется, изображение загружается на сервер, а адрес изображения возвращается на сторону сервера и назначен элементу IMG.
Недостатки: рабочая нагрузка большая. Некоторые загрузки не являются изображениями, которые пользователям необходимо загрузить в конце. Тем не менее, этот метод сохранит все изображения, выбранные во время процесса загрузки на сервер, что приведет к отходу ресурсов. Кроме того, очистка временных предварительных изображений на стороне сервера также требует определенного объема работы.
② Используйте новую функцию HTML5 FILEREADER.
Этот объект предоставляет много связанных методов, наиболее важным методом является readasdataurl. Нажмите меня, чтобы узнать больше.
Недостатки: схема URI данных, полученная с помощью метода FileReader ReadasDataurl, будет генерировать очень длинную строку Base64. Если изображение больше, строка будет длиннее. Если произойдет рефлектор страницы, это приведет к снижению производительности. Кроме того, поддержка браузера противоречивая, а поддерживаемые браузеры: FF3.6+, Chrome7+, IE10+.
③ Используйте window.url.createObjectUrl вместо FileReader, а затем используйте фильтр dximageTransform.microsoft.alphaimageLoader, который будет совместим с IE.
Недостатки: из -за соображений безопасности в IE11 реальный адрес выбранного пользователя не может быть получен с помощью значения, OUTERHTML и getAttribute на элементе ввода [type = file] и может быть получен только.
D:/Frontend/Имя файла. Поэтому вам необходимо использовать Document.selection.createrangeCollection для получения реального адреса.
2. Мой подключаемый производство
Я выбрал более консервативный метод, который является третьим методом для использования window.url.createObjecturl вместо FileReader, а затем использую DximateRansform.microsoft.alphaimageLoader Filter, который будет совместим с IE.
① Первым шагом является макет HTML
<div id = "pic"> <img id = "preview" src = "../ imgs/default.jpeg"> </div> <input type = "file" id = "uploadbtn" Accept = "Image/*" Onchange = "setPreviewpic ()">
Вы хотите сказать так просто?
«Сторонний шаг, плагин-инкапсуляция JS.
1. Создать объект
В основном я принимаю комбинированный метод наследования и инкапсуляю два метода, а именно однократную загрузку изображения и загрузку нескольких изображений. Поскольку загружает ли он одно изображение или загружает одно изображение, вам необходимо передавать и загрузить кнопку ввода, тег IMG, Div, завернутый в IMG и максимальное значение отдельного изображения в KB. Следовательно, эти четыре параметра должны быть переданы при создании объекта загрузки изображения. Метод создания этого объекта заключается в следующем:
var setPreviewpic = function (fileObj, preview, picwrap, maximgsize) {this.fileobj = fileobj; this.preview = preview; this.picwrap = picwrap; this.maximgsize = maximgsize;}2. Определите схему соответствующего
Поскольку он загружает изображения, в дополнение к добавлению Accement = "Image/*" для ввода и внесения предварительных ограничений, также необходима регулярность JS, чтобы определить, является ли это изображением через обнаружение пути. Так что определите этот шаблон на прототипе для использования двумя методами:
SetPreviewpic.prototype.pattern = new Regexp ('/. (Jpg | png | jpeg)+$', 'i');3. Определите метод
Главное - определить, ниже ли среда, чем IE11, и написать два типа решений. Первое - напрямую предварительно просмотреть изображение, изменив SRC IMG, а вторым является достижение эффекта предварительного просмотра с помощью фильтров под более низкой версией IE.
FF, Chrome, IE11 или выше: (код для предварительного просмотра нескольких изображений здесь размещен)
<pan> if (maxpics) {</span> <br> if (this.fileobj.files && this.fileobj.files [0]) {var imgs = this.picwrap.queryselectorall ('img'); // Найти, сколько изображений уже находится в dom var num = imgs.length; var html = this.picwrap.innerhtml; if (number (num) <number (maxpics)) {// судить о том, превышается ли максимальный предел загрузки if (num == 1 && (! imgs [0] .classlist.contains ('newload'))) {// покрытие первого изображения по умолчанию по умолчанию. html = '';} if (this.pattern.test (fileobj.files [0] .name)) {if (judgeize (fileobj.files [0] .size/1024, this.maximgsize)) {// Судебные ли style = "Margin: 5px; ширина: '+width+' px; высота: '+высота+' px;" src = '+window.url.createobjecturl (this.fileobj.files [0])+' /> '+html; this.picwrap.innerhtml = html;} else {alert ('загруженная вами изображение слишком велика!В соответствии с IE11, используйте фильтры для достижения эффекта:
var nums = this.picwrap.childnodes.length; // Поскольку queryselectorall и другие методы не поддерживаются ниже IE6, мы можем судить, если (nums <maxpics+2) по длине детей, если (nums <maxpics+2) {// Добавление 2 здесь - это то, что есть дефект, и длина детей. this.fileobj.select (); if (document.selection) {var imgsrc = document.selection.createrange (). Text; var image = new Image (); image.src = imgsrc; filesize = image.filesize; if (judgeize (image.filesize/1024, this.maximgsize)) {// Размер div должен быть установлен в IE var ele = document.createElement ('div'); ele.style.width = width+'px'; ele.style.height = height+'px'; ele.style.filter = "progid: dximagetra nsform.microsoft.alphaimageloader (sizingmethod = scale, src = '"+imgsrc+"') "; try {this.picwrap.appendchild (ele);} catch (e) {alert ('the Изображение, которое вы загружены, неверно, пожалуйста, выберите еще раз! '); вернуть false;} this.preview.style.display = 'none'; document.selection.empty ();} else {alert ('загруженное вами изображение слишком велик!');}}На данный момент это сделано!
Использование:
<script type = "text/javascript" src = "../ js/sountpic.js"> </script> <sript> var fileobj = document.getelementbyid ('uploadbtn'); var preview = document.getelementbyid ('preview'); var picwrap = document.getelementbyid ('pice'); SetPreviewpic (fileObj, preview, picwrap, 100); // Определить объект загрузки изображения, параметры - это кнопка ввода для загрузки изображения, пакет метров IMG, Div, завернутый в IMG, и максимальное значение для единого фото, UNITE - KBOBJ.Uploadsinglepic (200,250);///uploadpics (200,250,2) ;2) ;2) ;2) ;2) ;2) ;2); // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // загружает несколько изображений, параметры - это ширина, высота и максимальное количество загрузок} </script>Выше приведено соответствующие знания о производстве плагин-модуля с изображением JS-загрузки (совместимо с IE6), представленным вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя!