readFile

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是在什么情况下触发的,整个函数的执行顺序是怎么样的,有么有大佬知道。

阅读 2.3k
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)
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题