自执行函数的魔力

  <input onchange="fileChange3(this.files)" type="file" id="upload_file3" multiple style="display: none"/>

function fileChange3( files ){
// console.log( files )
var f = document.getElementById(“upload_file3”).value;
if( f == “” )
{ alert(“请上传图片”);return false;}
else
{
if(!/.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f))
{
alert(“图片类型必须是.gif,jpeg,jpg,png中的一种”)
return false;
}
}
for (var i = 0; i < files.length; i++) {
console.log(files[i])
if(files.length){
var file = files[i];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
file.src = this.result;
document.getElementById(“clearfix”).innerHTML+= ‘

• ’+file.name+’

  
• ’
  };
  }
  };

  		}
  

  ** 渲染input上传的图片时获取的文件名只有最后选择的那个图片的名字，打印i后发现只有最后上传的那个i，所以就用自执行函数（function（i）{}）（i）这样就可以打印出来了。。**
  function fileChange3( files ){
  // console.log( files )
  var f = document.getElementById(“upload_file3”).value;
  if( f == “” )
  { alert(“请上传图片”);return false;}
  else
  {
  if(!/.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f))
  {
  alert(“图片类型必须是.gif,jpeg,jpg,png中的一种”)
  return false;
  }
  }
  for (var i = 0; i < files.length; i++) {
  console.log(files[i])
  if(files.length){
  (function(i){
  var file = files[i];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(){
  file.src = this.result;
  document.getElementById(“clearfix”).innerHTML+= ‘

• ’+file.name+’

  
• ’
  };

  	        	 	})(i)
  					   
  		   		 }
  	        };
  		 
  	}
  

  (function(i){
  })(i) 第一个i是形参，第二个i是实参，每次执行是传递的是上级for循环里面的i

  也可以传参传file但是reader.readAsDataURL(file);放在渲染后面
  function fileChange3(files){
  // console.log( files )
  var f = document.getElementById(“upload_file3”).value;
  if(f === “”){
  alert(“请上传图片”);
  return false;
  }else{
  if(!/.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){
  alert(“图片类型必须是.gif,jpeg,jpg,png中的一种”)
  return false;
  }
  }
  for(var i = 0; i < files.length; i++){
  console.log(files[i]);
  if(files.length){
  var file = files[i];
  var reader = new FileReader();
  reader.onload = (function(file){
  return function(){
  file.src = this.result;
  document.getElementById(“clearfix”).innerHTML += ‘

• ’ + file.name + ‘

  
• ’;
  }
  })(file);
  reader.readAsDataURL(file);
  }
  }

  }