Загрузка изображения является обычной функцией, а предварительный просмотр изображения является незаменимой подфункцией в функции загрузки. Перед этим я использовал подписку на событие OnChange элемента ввода [type = file], после того, как путь изменяется, изображение загружается на сервер, а затем получается путь изображения, и значение присваивается элементу IMG. Независимо от решения асинхронного представления файлов, он состоит в том, чтобы очистить временные предварительные изображения на стороне сервера, что увеличило рабочую нагрузку.
Я случайно обнаружил соответствующую информацию о предварительном просмотре изображения Pure Front-End из MDN, а затем отсортировал ее и записал для будущей ссылки.
1. Подготовка 1 регулярного
FileReader - это новая функция HTML5 для чтения данных о BLOB и типах файлов. Конкретное использование следующего:
(1). Строительный метод
var fr = new FileReader ();
(2). Атрибуты
ReadyState: Тип не имеет знаки короткой, текущее состояние экземпляра FileReader (пустое-0, данные еще не загружено; загрузка-1, данные загружаются; выполняются-2, все запросы чтения были выполнены), только для чтения.
Результат: содержимое файла чтение, только для чтения.
Ошибка: тип-Domerror, указывающая на ошибку, которая возникает при чтении файла, только для чтения.
(3). Метод
ABORT (): прервать операцию чтения и установите готовый участок. Когда операция чтения не выполнена, вызов этого метода вызовет исключение DOM_FILE_ABORT_ERR.
ReadAsarrayBuffer (Blob Blob): чтение данных, атрибут результата установлен на тип ArrayBuffer
READASTEXT (Blob Blob [, Encoding = 'UTF-8']): чтение данных, атрибут результата установлен на тип строки
ReadasbinaryString (Blob Blob): чтение данных, атрибут результата устанавливается на исходные двоичные данные
ReadasDataurl (Blob Blob): прочитать данные, атрибут результата устанавливается в форму схемы URI Data (для получения подробной информации, пожалуйста, посетите «JS Magic Hall: Введение в схему URI Data»)
(4). Событие
Onload: запускается после успешного прочтения данных
OneError: запускается при ударе исключения при чтении данных
OnloadStart: запускается перед чтением данных
OnloadEnd: запускается после чтения данных, запускаемых после нагрузки или Onerror
Onabort: вызвано после прерывания чтения
OnProgress: периодически запускается во время чтения
(5). Поддержка браузера
FF3.6+, Chrome7+, IE10+
2. Подготовка 2 опредеREA
(1). Функция: Основная функция состоит в том, чтобы прозрачно обработать изображения (т. Е.5 ~ 6 не поддерживает прозрачный PNG)
(2). Как использовать в стилях
#preview {filter: progid: dximagetransform.microsoft.alphaimageLoader (sizingmethod = scale, src = "dummy.png");}(3). Как использовать в JS
var preview = document.getElementbyid ('preview'); preview.style.filter = preview.currentstyle.filter + "; Progid: dximagetransform.microsoft.alphaimageLoader (sizingmethod = Scale, src = 'dummy.png')"; preview.filters.item ("dximageTransform.microsoft.alphaimageLoader"). src = "dummy1.png";(4). Атрибуты
Включено: необязательно, устанавливает, активируется ли фильтр. Диапазон значений true (по умолчанию), false
Размещение Method: необязательно, устанавливает, как отображается изображение, действующее фильтров, отображается на границе контейнера, урожая диапазона значений (отрежьте изображение, чтобы соответствовать размеру контейнера), изображение (значение по умолчанию, увеличение или уменьшение размера контейнера, чтобы соответствовать размеру изображения), масштабирование (масштабирование изображения в соответствии с размером контейнера)
SRC: Требуется, используйте абсолютный или относительный URL, чтобы указывать на фоновое изображение. Когда URL -адрес является локальным адресом пользовательского компьютера, исключение, которое не позволяет доступа к локальной файловой системе, будет брошен, когда SRC элемента IMG является локальным адресом пользовательского компьютера.
Выполнение
Затем мы используем ReadasDataurl of FileReader для получения схемы URI Data для реализации функции предварительного просмотра изображения, и мы используем фильтр dximageTransform.microsoft.alphaimageLoader для понижения.
фрагмент HTML:
<style type = "text/css">#Предварительный просмотр {ширина: 100px; Высота: 100px;} </style> <!-[if lte ie 9]> <style type = "text/css"> #preview {filter: progid: dximagetransform.microsoft.alphaimageLoader (sizingmethod = scale); } </style> <! [endif]-> <input type = "file" onchange = "showpreview (this);"/> <div id = "preview"> </div>JS Fragment:
var preview = function (el) {var pv = document.getElementByid ("preview"); // IE5.5 ~ 9 Используйте фильтры if (pv.filters && typeof (pv.filters.item) === 'function') {pv.filters.item ("dximagetransform.microsoft.alphaimageLoader"). Src = el.Value; } else {// Другие браузеры и IE10+ (Фильтры не поддерживают) Используйте fileDeader var fr = new FileReader (); fr.onload = function (evt) {var pvimg = new image (); pvimg.style.width = pv.offsetwidth + 'px'; pvimg.style.height = pv.offsetheight + 'px'; pvimg.src = evt.Target.Result; Pv.RemoveChild (0); pv.appendchild (pvimg); }; fr.readasdataurl (el.files [0]); }};4. Яма
Поскольку IE11 сделал соображения безопасности, невозможно получить реальный адрес выбранного файла пользователя через значение, OUTERHTML и getAttribute на элементе ввода [type = file] и может получить только имя C:/ fakePath/ файл. Поэтому, если IE11 используется, но текстовый режим установлен ниже 10, нет способа достичь предварительного просмотра изображения.
РЕШЕНИЕ 1 ─дии этого предложения под тегом головы: <meta http-equiv = "x-ua-совместимый" content = "IE = Edge">. Это скажет т.е., что самая высокая версия текущего IE может быть использована для анализа и отображения веб -страниц по умолчанию.
Решение 2 ─ Ase Document.selection.createrangeColleCiton () для получения реального адреса. Конкретная операция заключается в следующем:
// Предположим, что Fileel - это элемент [type = file] fileel.select (); var filePath = document.select.createrangeCollection () [0] .htmlText;
5. Дополнение: используйте window.url.createObjecturl вместо FileReader
Схема URI Data, полученную с помощью метода FileReader ReadasDataurl, будет генерировать очень длинную строку Base64. Если изображение больше, строка будет длиннее. Если произойдет рефлектор страницы, это приведет к снижению производительности. Решение заключается в следующем:
1. Предварительно просмотр IMG -тег использует абсолютное позиционирование, чтобы выйти из обычного потока документов, что не имеет ничего общего с другими элементами документа, и не будет влиять на производительность при переоборудовании.
2. Используйте window.url.createObjectUrl (Blob Blob), чтобы создать ссылки на данные.
var createObjecturl = function (blob) {return window [window.webkiturl? 'webkiturl': 'url'] ['createObjecturl'] (blob);};ПРИМЕЧАНИЕ. Ссылка данных, сгенерированная Window.url.createObjecturl, является эксклюзивной памятью, поэтому, если вы используете его время от времени, вам нужно вызовать windo.url.revokeobjecturl (domstring objurl), чтобы освободить память. Контент также будет автоматически выпущен, когда страница обновлена.
var resulebjecturl = function (blob) {window [window.webkiturl? 'webkiturl': 'url'] ['revokeobjecturl'] (blob);};Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.