Дополнительно
Предварительный просмотр изображения перед его загрузкой
Я хочу иметь возможность предварительного просмотра файла (изображения) перед его загрузкой. Действие предварительного просмотра должно выполняться в браузере без использования Ajax для загрузки изображения.
Как я могу это сделать?
1466
20
Пожалуйста, посмотрите на приведенный ниже пример кода:
Также вы можете [попробовать этот пример здесь](http://jsfiddle.net/LvsYc/).
Есть пара способов сделать это. Наиболее эффективным способом было бы использовать URL.createObjectURL () в Файле из вашего & lt; input >. Передайте этот URL-адрес img.src, чтобы указать браузеру загрузить предоставленное изображение.
Вот пример:
& Лт;!- начать фрагмент: js скрыть: false - >
& Лт;!- конец фрагмента - >
Вы также можете использовать FileReader.readAsDataURL () для анализа файла из вашего & lt; input > gt ;. Это создаст строку в памяти, содержащую представление изображения base64.
& Лт;!- начать фрагмент: js скрыть: false - >
& Лт;!- конец фрагмента - >
Однострочное решение:
Следующий код использует URL-адреса объектов, которые намного эффективнее, чем URL-адрес данных для просмотра больших изображений (URL-адрес данных - это огромная строка, содержащая все данные файла, тогда как URL-адрес объекта - это просто короткая строка, ссылающаяся на данные файла в память):
& Лт;!- начать фрагмент: js скрыть: false - >
& Лт;!- конец фрагмента - >
Сгенерированный URL будет похож на:
Ответ LeassTaTT хорошо работает в "стандартных" браузерах, таких как FF и Chrome. Решение для IE существует, но выглядит иначе. Описание кроссбраузерного решения здесь:
В HTML нам нужны два элемента предварительного просмотра, img для стандартных браузеров и div для IE.
HTML:
В CSS мы указываем следующую особенность, характерную для IE:
CSS:
В HTML мы включаем стандартный и специфический для IE Javascript:
Я отредактировал ответ @Ivan, чтобы отобразить изображение «Нет предварительного просмотра», если это не изображение:
Вот версия нескольких файлов , основанная на ответе Ивана Баева.
HTML
JavaScript / jQuery
Требуется jQuery 1.8 из-за использования $ .parseHTML, что должно помочь с уменьшением XSS.
Это сработает из коробки, и единственная зависимость, которая вам нужна, это jQuery.
Да. Возможно.
HTML
JS
Вы можете получить [Live Demo][1] отсюда.
Чисто и просто [ JSfiddle ][1]
Это будет полезно, когда вы хотите, чтобы событие запускалось косвенно с помощью div или кнопки.
Пример с несколькими изображениями с использованием JavaScript (jQuery) и HTML5
JavaScript (jQuery)
Markup (HTML)
Ниже приведен рабочий код.
Javascript:
Как насчет создания функции, которая загружает файл и вызывает пользовательское событие. Затем прикрепить слушателя к входу. Таким образом, мы получим больше возможностей для использования файла, а не только для предварительного просмотра изображений.
Возможно, мой код не так хорош, как у некоторых пользователей, но я думаю, что вы поймете его суть. Здесь приведен [пример][1]
Попробуй это
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
& Лт;!- конец фрагмента - >
Как насчет этого решения?
Просто добавьте атрибут данных "data-type = editable" в тег изображения, как это:
И сценарий к вашему проекту не в курсе...
[См. Демонстрацию на JSFiddle][1]
Я сделал плагин, который может генерировать эффект предварительного просмотра в IE 7+ благодаря Интернету, но имеет несколько ограничений. Я поместил его в github page, чтобы его было легче получить
& Лт;!- начать фрагмент: js скрыть: false - >
& Лт;!- конец фрагмента - >
Для многократной загрузки изображений (Изменение решения @IvanBaev)
http://jsfiddle.net/LvsYc/12330/
Надеюсь, это кому-то поможет.
В React, если файл находится в вашем реквизите, вы можете использовать:
Это мой код. Поддержка IE [6-9] 、 хром 17+ 、 firefox 、 Опера 11+ 、 Maxthon3
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - > & Лт;!- язык: lang-html - > < input type = "file" id = "netBarBig" onchange = "changeFile (this)" / > < img src = "" id = "imagePreview" style = "width: 120px; height: 80px;" alt = "" / >
& Лт;!- конец фрагмента - >
Вот решение, если вы используете React:
Это будет предварительный просмотр нескольких файлов в виде миниатюр изображений одновременно
HTML
Сценарий
Рабочая демонстрация на Codepen
[Рабочая демонстрация на jsfiddle][1]
Я надеюсь, что это поможет.