Не удается получить доступ к имени файла в JavaScript для чтения файлов

Question

Я делаю просмотрщик изображений в браузере. Предварительный просмотр изображений загружается нормально, но имя файла в этой строке повторяет первое имя файла:

<div.innerHTML = "<img class='thumbnail' src='" + picfile.result + "'" +
"title='" + file.name + "'/>

Я пытался

picfile.name 
file.name 
file[i].name 
files.name 
files[i].name 

и никто не работал. Либо выводит неопределенный, либо нарушает весь скрипт.

Вот полный код программы чтения файлов.

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadimage ");
    filesInput.addEventListener("change ", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result ");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picreader = new FileReader();
        picreader.addEventListener("load ", function(event) {
          var picfile = event.target;
          var div = document.createElement("div ");
          div.innerHTML = "<img class='thumbnail' src='" + picfile.result + "' " +
            "title='" + file.name + "' /><br>";
          //div.innerHTML += picfile.name + '<br><span style="color:red">' + picfile.name.toLowerCase().replace(/[^\w\d\.]/gi, '') + '</span>';
          //filename output.insertBefore(div, null);
        });
        picreader.readAsDataURL(file);
      }
    });
  }
}

<input type="file" multiple id="uploadimage" class="file_input ">
<div id="result" class="uploadPreview "></div>

Answer 1

Вам нужно изменить var file = files[i]; на let file = files[i]; внутри цикла for.

Дополнительная информация о закрытии JavaScript внутри циклов в

Закрытие JavaScript внутри циклов - простой практический пример

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadimage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        let file = files[i];
        if (!file.type.match('image'))
          continue;
        var picreader = new FileReader();
        picreader.addEventListener("load", function(event) {
          var picfile = event.target;
          var div = document.createElement("div");
          console.log(file.name);
          div.innerHTML = "<img class='thumbnail' src='" + picfile.result + "'" +
            "title='" + file.name + "'/><br>";
//div.innerHTML += picfile.name+'<br><span style="color:red">'+picfile.name.toLowerCase().replace(/[^\w\d\.]/gi, '')+'</span>'; //filename
          output.insertBefore(div, null);
        });        
        picreader.readAsDataURL(file);
      } 

    });
  }
}

<input type="file" multiple id="uploadimage" class="file_input">
<div id="result" class="uploadPreview"></div>
    <script>    
  
</script>