Javascript FileReader Несколько изображений

Я пытаюсь реализовать интерфейс FileReader для javascript в своем проекте.Javascript FileReader Несколько изображений

Требование: есть поле ввода файла, которое включено «несколько», я хочу, чтобы пользователь выделил несколько изображений и должен видеть изображения на странице даже перед тем, как нажать submit (чтобы он (ы) мог удалить это если он хочет!). Но проблема в том, что на экране отображается только одно изображение. Создаются теги, но src пуст, за исключением последнего изображения.

Код:

<html> 
<head> 
    <meta charset="windows-1252"> 
    <title></title> 
</head> 
<body> 
    <div> 
     <form action="upload.php" method="post" enctype="multipart/form-data"> 
      <input type="file" name="abc[]" multiple/> 
      <input type="submit"/> 
     </form> 
    </div> 
<img id="image0"/> 
</body> 

<script src="resources/js/jquery-2.1.3.min.js" type="text/javascript"></script> 
<script> 
    $('document').ready(function() { 
     $("input[name='abc[]']").change(function (e) { 
      console.log(e.originalEvent.srcElement.files.length); 
      for (var i = 1; i <= e.originalEvent.srcElement.files.length; i++) { 

       var file = e.originalEvent.srcElement.files[i-1]; 
       var img = document.createElement("img"); 
       img.id = "image"+i; 
       var reader = new FileReader(); 
       reader.onloadend = function() { 
        img.src = reader.result; 
       } 
       reader.readAsDataURL(file); 
       $("#image"+(i-1)).after(img); 
      } 
     }); 
    }); 
</script>

Для примера, во всплывающем окне выбора изображения, если я выбранный Img1. img2 и img3, отображается только img3. однако при подаче заявки я получаю все изображения со стороны сервера: enter image description here

Что мне здесь не хватает?

источник

2015-03-23 Shekhar Joshi

Посмотрите How do JavaScript closures work?

Ваш для onloadend обратного вызова собирается стрелять после того, как цикл завершается, поэтому img будет установлен последний элемент изображения создается при onloadend пожаров для каждого FileReader вы создали. Простой обходной путь для этого закрытия вопроса является использование IIFE вернуть функцию, которая использует значение переменной IMG в этот момент в цикле, чтобы использовать в качестве обработчика

  reader.onloadend = (function (img) { 
       return function(){ 
        img.src = reader.result; 
       }; 
      })(img)

или использовать JQuery-х each

 $.each(e.originalEvent.srcElement.files, function(i, file) { 

      var img = document.createElement("img"); 
      img.id = "image"+(i+1); 
      var reader = new FileReader(); 
      reader.onloadend = function() { 
       img.src = reader.result; 
      } 
      reader.readAsDataURL(file); 
      $("#image"+i).after(img); 
     });

источник

2015-03-24 16:58:55 Musa

работал как шарм, спасибо тонну! –

Javascript FileReader Несколько изображений

ответ

Смежные вопросы