HTML первый файл в селекторе файлов не существует - PullRequest
Новая
       20

HTML первый файл в селекторе файлов не существует

1 голос
/ 03 апреля 2020

Все, что я пытаюсь сделать, это позволить пользователю загружать файлы изображений и отображать их один за другим, но по какой-то причине первый файл в списке загружаемых мной изображений никогда не работает. Данные изображения не определены. Ошибки не отображаются.

Проверьте здесь: http://jsfiddle.net/59q8f3bh/

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

My HTML: 

<body>
  <input type="file" name="image" id="image" multiple accept="image/*">
  <button type="submit" onclick="upload()">Upload</button>
  <img src="">

  <script src="js/upload.js"></script>
</body>

My JS: 

function upload() {
  var selected = document.getElementById('image');

  for (var i = 0; i < selected.files.length; i++) {
    var img = selected.files[i];
    var imgData;

    var reader = new FileReader();

    reader.addEventListener("load", function () {
      imgData = reader.result;
    }, false);

    reader.readAsDataURL(img);
    document.getElementsByTagName('img')[0].src = imgData;
    alert(i);
  }
}

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Вот скрипка с решением .

Событие, которое вы ожидали с помощью «load», является асинхронным и, следовательно, занимает некоторое время, когда ваша программа стекает вниз и попадает в эту строку : 

document.getElementsByTagName('img')[0].src = imgData;

Результат не определен, так как imgData еще не установлен из-за асинхронного характера события load.

Решение состоит в том, чтобы просто переместить установщик img в обратный вызов события.

0 голосов
/ 03 апреля 2020

Событие load происходит асинхронно, вам нужно использовать результат в функции обратного вызова. 

    reader.addEventListener("load", function () {
      imgData = reader.result;
      document.getElementsByTagName('img')[0].src = imgData;
    }, false);

    reader.readAsDataURL(img);
    alert(i);
  }

Но вы увидите только последнее изображение, так как есть только одно <img> элемент.

...