Я хочу иметь возможность предварительного просмотра файла (изображения) до его загрузки. Действие предварительного просмотра должно выполняться в браузере без использования Ajax для загрузки изображения.
Как я могу это сделать?
javascript
jquery
file-upload
Симбиан
источник
источник
Ответы:
Пожалуйста, посмотрите на пример кода ниже:
Кроме того, вы можете попробовать этот образец здесь .
источник
document.getElementById('blah').src=e.target.result)
input.files[0]
как данные, см. документацию jQuery .input.files[0]
не имеет полного пути. Как FileReader находит файл?Есть несколько способов сделать это. Наиболее эффективным способом было бы использование URL.createObjectURL () для файла из вашего <input> . Передайте этот URL-адрес img.src, чтобы сообщить браузеру загрузить предоставленное изображение.
Вот пример:
Вы также можете использовать FileReader.readAsDataURL () для анализа файла из вашего <input>. Это создаст строку в памяти, содержащую представление base64 изображения.
источник
URL.revokeObjectURL
когда вы закончите со своим BLOB-объектомОднострочное решение:
В следующем коде используются URL-адреса объектов, которые намного более эффективны, чем URL-адреса данных, для просмотра больших изображений (URL-адрес данных - это огромная строка, содержащая все данные файла, тогда как URL-адрес объекта - это просто короткая строка, ссылающаяся на данные файла в Память):
Сгенерированный URL будет выглядеть так:
источник
FileReader
иinput.files
т. Д.),URL.createObjectURL
Является подходом для работы с файлами, отправленными пользователем, он создает только символическую ссылку в памяти на настоящий файл на диске пользователя.Ответ LeassTaTT хорошо работает в «стандартных» браузерах, таких как FF и Chrome. Решение для IE существует, но выглядит иначе. Вот описание кросс-браузерного решения:
В HTML нам нужны два элемента предварительного просмотра,
img
для стандартных браузеров иdiv
для IEHTML:
В CSS мы указываем следующую специфическую для IE вещь:
CSS:
В HTML мы включаем стандартные и специфичные для IE Javascripts:
Это
pic_preview.js
Javascript из ответа LeassTaTT. Замените$('#blah')
ти$('#preview')
и добавить$('#preview').show()
Теперь специфичный для IE Javascript (pic_preview_ie.js):
Вот это. Работает в IE7, IE8, FF и Chrome. Пожалуйста, проверьте IE9 и сообщите. Идея предварительного просмотра IE была найдена здесь: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
источник
Я отредактировал @ Иван ответ, чтобы отобразить изображение «Нет предварительного просмотра», если это не изображение:
источник
Вот версия для нескольких файлов , основанная на ответе Ивана Баева.
HTML
JavaScript / JQuery
Требуется jQuery 1.8 из-за использования $ .parseHTML, который должен помочь в смягчении последствий XSS.
Это будет работать из коробки, и единственная зависимость, которая вам нужна - это jQuery.
источник
Да. Это возможно.
Html
JS
Вы можете получить Live Demo здесь.
источник
Чистый и простой JSfiddle
Это будет полезно, если вы хотите, чтобы событие инициировалось косвенно с помощью div или кнопки.
источник
<label>
и избегать JavaScript для обработки нажатия кнопки вообще. Запуск файлового ввода с использованием чистого HTML / CSS. и это совсем не хаки.Пример с несколькими изображениями с использованием JavaScript (jQuery) и HTML5
JavaScript (jQuery)
Разметка (HTML)
источник
Как насчет создания функции, которая загружает файл и запускает пользовательское событие. Затем присоедините слушателя к входу. Таким образом, у нас больше гибкости в использовании файла, а не только для предварительного просмотра изображений.
Возможно, мой код не так хорош, как некоторые пользователи, но я думаю, вы поймете это. Здесь вы можете увидеть пример
источник
Ниже приведен рабочий код.
Javascript:
источник
В React, если файл находится в ваших реквизитах, вы можете использовать:
источник
Как насчет этого решения?
Просто добавьте атрибут данных «data-type = editable» к тегу изображения следующим образом:
И сценарий к вашему проекту с курса ...
Посмотреть демо на JSFiddle
источник
Попробуй это
источник
Это позволит предварительно просмотреть несколько файлов в виде миниатюр изображений одновременно
Html
скрипт
Рабочая демонстрация на Codepen
Рабочая демоверсия по jsfiddle
Я надеюсь, это поможет.
источник
Я сделал плагин, который может генерировать эффект предварительного просмотра в IE 7+ благодаря Интернету, но имеет несколько ограничений. Я положил его на страницу GitHub, чтобы его было проще получить
источник
Для загрузки нескольких изображений (Модификация решения @ IvanBaev's)
http://jsfiddle.net/LvsYc/12330/
Надеюсь, это кому-нибудь поможет.
источник
Это мой код. Поддержка IE [6-9], Chrome 17 +, Firefox, Opera 11 +, Maxthon3
источник
Iamge по умолчанию
источник
Вот решение, если вы используете React:
источник
Это самый простой способ предварительного просмотра изображения перед его загрузкой на сервер из браузера без использования Ajax или каких-либо сложных функций. Для загрузки изображения необходимо событие onchange.
Изображение будет загружено сразу после его выбора.
источник
для моего приложения, с зашифрованными параметрами URL GET, только это работало. Я всегда получил
TypeError: $(...) is null
. Взято из https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURLисточник
HTML
Это также обрабатывает случай, когда файл с недопустимым типом (например, PDF) выбран
источник