Затем я выбираю несколько файлов, нажимая эту кнопку ввода. Теперь я хочу показать предварительный просмотр выбранных"> Затем я выбираю несколько файлов, нажимая эту кнопку ввода. Теперь я хочу показать предварительный просмотр выбранных"> Затем я выбираю несколько файлов, нажимая эту кнопку ввода. Теперь я хочу показать предварительный просмотр выбранных" />

Показывать предварительный просмотр изображения перед загрузкой

В моей HTML-форме у меня есть входной файл с файлом типа, например:

 <input type="file" multiple>

Затем я выбираю несколько файлов, нажимая эту кнопку ввода. Теперь я хочу показать предварительный просмотр выбранных изображений перед отправкой формы. Как это сделать в HTML 5?

98
nl ja de
То же самое для одиночного изображения: stackoverflow. ком/вопросы/4459379/& hellip;
добавлено автор Ciro Santilli 包子露宪 六四事件 法轮功, источник

3 ответы

HTML5 поставляется с Спецификацией API файлов , которая позволяет создавать приложения, которые позволяют пользователю взаимодействовать с файлами локально; Это означает, что вы можете загружать файлы и отображать их в браузере, не загружая файлы. Часть API файлов - это FileReader интерфейс, который позволяет асинхронно читать веб-приложения содержимое файлов.

Ниже приведен краткий пример использования класса FileReader для чтения изображения в виде DataURL и рендеринга миниатюры путем установки атрибута src тега изображения в URL-адрес данных:

Код html:

<input type="file" id="files" />

Код JavaScript:

document.getElementById("files").onchange = function() {
    var reader = new FileReader();

    reader.onload = function (e) {
       //get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

   //read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Вот хорошая статья о использовании API-интерфейсов файлов в JavaScript .

Фрагмент кода в приведенном ниже примере HTML отфильтровывает изображения из пользовательского выбора и отображает выбранные файлы в виде нескольких эскизов миниатюр:

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

function handleFileSelect(evt) {
    var files = evt.target.files;

   //Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

     //Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

     //Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
         //Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            ''
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

     //Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple />
</div> </div>

217
добавлено
как насчет загрузки нескольких файлов?
добавлено автор jned29, источник
Мне нравится этот StackOverflow, это быстрее, чем официальные документы :), пожалуйста, поддержите хорошие ответы, чтобы продвинуть эту социальную модель: D
добавлено автор Zied Hamdi, источник
Я также хотел бы знать решение с этим для нескольких файлов без необходимости копировать фрагмент кода несколько раз
добавлено автор Nicholas, источник
О да, не смотрел на эту часть, спасибо! Я попробую это позже!
добавлено автор Nicholas, источник
more Q: как можно выбить конкретный файл из нескольких списков?
добавлено автор Phlip, источник
Просто отключите элемент ввода файла, и он не будет загружен! Итак, в приведенном выше примере: document.getElementById ("uploadImage"). Disabled = true
добавлено автор Kamyar Nazeri, источник
@Nicholas Фрагмент кода в разделе «Показать фрагмент» фактически позволяет загружать несколько изображений и просматривать их все
добавлено автор Kamyar Nazeri, источник
Спасибо, что это работает для меня.
добавлено автор Hardik Sondagar, источник
Теперь Как отменить некоторые изображения для загрузки, а затем отправить форму? Это будет очень полезно для меня.
добавлено автор Hardik Sondagar, источник
Но я хочу знать, как удалить определенный файл, чтобы предотвратить его загрузку. Он определен в некоторой структуре.
добавлено автор Hardik Sondagar, источник
Я понял.
добавлено автор Hardik Sondagar, источник
Здесь очень похожий ответ на jQuery, который не имеет прерывателей отвлекающих переменных: stackoverflow.com/questions/4459379/…
добавлено автор Andz, источник
@KamyarNazeri Если FileReader недоступен, то как насчет этого?
добавлено автор MichaelLuthor, источник

Здесь я работал с jQuery, используя FileReader API.

Html Markup:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

Здесь, в коде jQuery, сначала проверяю расширение файла. i.e действительный файл изображения , который будет обрабатываться, тогда будет проверяться, поддерживает ли браузер FileReader API, а затем обрабатывается иначе, отображает уважаемое сообщение

$("#fileUpload").on('change', function() {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

Подробная статья: как просмотреть Изображение перед загрузкой, jQuery, HTML5 FileReader() с Live Demo

16
добавлено
не считается плохой практикой, если вы declear var в для цикла ? каждый раз for loop итерация новой переменной reader будет неясной ..
добавлено автор Phoenix, источник

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

function handleFileSelect(evt) {
    var files = evt.target.files;

   //Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

     //Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

     //Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
         //Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            ''
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

     //Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple />
</div> </div>

2
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing