Javascript: Как сделать загрузку файла (не только изображение)? - PullRequest
Новая
       4

Javascript: Как сделать загрузку файла (не только изображение)?

0 голосов
/ 28 января 2020

Я сделал загрузчик файлов, который обрабатывает изображения, но он плохо работает с файлами. Например: если я загружу 3 xlsx / word или какие-либо файлы, они будут иметь одинаковое имя для каждого.

Мой код здесь: 

<form>
  <input id="files" type="file" multiple="multiple">
  <div id="result"></div>
</form>

function handleFileSelect(event) {           
    if (window.File && window.FileList && window.FileReader) {
        var files = Array.from(event.target.files);
        var output = document.getElementById("result");
        output.innerHTML = '';
        console.log(files);
        for (var i = 0; i < files.length; i++) {
            var file = files[i];

            if(file.type.match('.php')){
                alert('ERROR');
                continue; 
            }             
            var picReader = new FileReader();
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;
                var div = document.createElement("div");
                div.className = "col-6 col-sm-4 p-1";
                if (file.type.match('image')) {
                    div.innerHTML = "<img src='" + picFile.result + "'" + "title='" + file.name + "'/>";
                }else{
                    div.innerHTML = "<div class='upload-thumb'>" + file.name + "</div>";
                }
                output.insertBefore(div, null);
            });
            picReader.readAsDataURL(file);
        }
    } else {
        console.log("Your browser does not support File API");
    }
}

Ссылка: https://jsfiddle.net/laszlooo/7c1Lv5x2/

Спасибо!

1 Ответ

1 голос
/ 28 января 2020

Проблема у вас в том, что у вас есть печально известная ошибка l oop. Где ссылка на i обновляется как ваша l oop. Вы можете использовать let вместо var или разбить часть, которую вы прочитали, на функцию, чтобы у вас не было проблемы. 

function readFile(file, output) {
  var picReader = new FileReader();
  picReader.addEventListener("load", function(event) {
    var picFile = event.target;
    var div = document.createElement("div");
    div.className = "col-6 col-sm-4 p-1";
    if (file.type.match('image')) {
      div.innerHTML = "<img src='" + picFile.result + "'" + "title='" + file.name + "'/>";
    } else {
      div.innerHTML = "<div class='upload-thumb'>" + file.name + "</div>";
    }
    output.insertBefore(div, null);
  });
  picReader.readAsDataURL(file);
}


function handleFileSelect(event) {
  if (window.File && window.FileList && window.FileReader) {
    var files = Array.from(event.target.files);
    var output = document.getElementById("result");
    output.innerHTML = '';
    console.log(files);
    for (var i = 0; i < files.length; i++) { // <-- where the problem begins
      var file = files[i]; // <-- this is your problem with the reference

      if (file.type.match('.php')) {
        alert('ERROR');
        continue;
      }
      
      readFile(file, output) // <-- using a function gets around the reference issue

    }
  } else {
    console.log("Your browser does not support File API");
  }
}

document.querySelector("input").addEventListener("change", handleFileSelect)
<form>
  <input id="files" type="file" multiple="multiple">
  <div id="result"></div>
</form>
...