Question

在上传之前我需要帮助制作缩略图。我在这里读了很多问题，但我的问题（我认为）有点不同。

所以我的代码：

function nextImg(num, name){
  var out = '<div class="row"><div class="col-md-2 col-xs-12" id="img_'+num+'"><img class="img-responsive pad img-thumbnail" id="imgreal_'+num+'" src="#" alt="'+name+'"></div></div>';
  return out;
}

function showImgs(event){
  var files = event.target.files;
  if(files['length'] > 0){
    var div_edit = ""
    for(var i = 0; i < files['length']; i++){
      div_edit += nextImg(i,files[i]['name']);
    }
    document.getElementById("img_container").innerHTML = div_edit;

    for(var i = 0; i < files['length']; i++){
      var reader = new FileReader();
      console.log(i);
      reader.onload = function (e) {
        var num = "imgreal_"+i;
        console.log(num);
        var output = document.getElementById(num);
        output.src = reader.result;
      }
      reader.readAsDataURL(event.target.files[i]);
    }
  }else{
    document.getElementById('mainTAGs').style.display = "none";
  }
}

<form role = "form"  method = "post">
  <div class="container col-md-12 col-xs-12" id="img_container">

  </div>
</form>

因此，当迭代覆盖秒for循环中打开的图片时，代码会提供所有 reader.onload 函数uniq “ imgreal_＃“id 。当onload被调用时，我会记录该ID，它始终是for循环的结束标准。

对于示例，假设我要上传3个图像，然后使用“imgreal_3”而不是“imgreal_0”调用reader.onload函数中的所有getElementById。 ..“imgreal_2”。

有任何建议如何解决？ THX提前！：）

Answer 1

这是JS的常见问题。为了使其工作，您应该为异步函数存储当前迭代值，以便以后访问它。例如。您可以将索引存储在IIFE中：

(function() {
    reader.onload = function (e) {
      var num = "imgreal_"+i;
      console.log(num);
      var output = document.getElementById(num);
      output.src = reader.result;
    }
  })(i)

解决方案是：

(function(n) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var num = "imgreal_"+n;
      console.log(num);
      var output = document.getElementById(num);
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[n]);
})(i);

使用FileReader上传之前的多个缩略图图像

1 个答案: