readFile

Question

function readFile(){

                  var files = this.files;
                 //console.log(files.length);
                  for(var i=0;i<files.length;i++){
                      (function(){
                          alert(i);
                          var temp = i;
                          if(!/image\/\w+/.test(files[i].type)){
                              return false;
                          }
                          var reader = new FileReader();
                          reader.readAsDataURL(files[i]);
                          reader.onload = function(e){
                              alert(i);
                              $('#image').append("<img src = '"+this.result+"' style='width:150px;height:150px;background-color:white;'/>");
                              //compress(this.result,temp);
                              $('#xiangdanpic').attr('info_'+i,this.result);
                          }
                      })();
                  }
              }

第一个i输出是0，第二个输出的是1，想问一下onload是在什么情况下触发的，整个函数的执行顺序是怎么样的，有么有大佬知道。

Answer 1

用了闭包，又不把循环的下标传进去，就没啥用了

for(var i=0;i<files.length;i++){
  (function(i){
      alert(i);
      var temp = i;
      if(!/image\/\w+/.test(files[i].type)){
          return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(files[i]);
      reader.onload = function(e){
          alert(i);
          $('#image').append("<img src = '"+this.result+"'style='width:150px;height:150px;background-color:white;'/>");
          //compress(this.result,temp);
          $('#xiangdanpic').attr('info_'+i,this.result);
      }
  })(i);
}

onload 就是在 readAsDataURL 这个方法读取到文件内容的时候触发。

补充：可以只在 onload 这里处理

for(var i=0;i<files.length;i++){
  if(!/image\/\w+/.test(files[i].type)){
      return false;
  }
  var reader = new FileReader();

  reader.readAsDataURL(files[i]);
  reader.onload = (function(i){
    return function(e) {
        var result = e.target.result
        
        $('#image').append("<img src = '"+result+"'style='width:150px;height:150px;background-color:white;'/>");
        $('#xiangdanpic').attr('info_'+i,result);    
    }
  })(i)
}