HTML5FileReader多图预览Ajax多图异步上传ThinkPHP接收

最近在做一个多图上传的功能，就想试试用html5的FileReader接口来实现上传前的预览，利用FormData包装多张图片，提交给ThinkPHP后台，找了一些网上的例子，然后自己根据实际需求改了一下，实现了以下效果：

 做的效果不是特别好看，请谅解！有想法的人，可以去把效果做得更好，我这里就是为了简单地实现出功能，也没有仔细测试过浏览器兼容

         

      	 

            +
            
         
      

#imgesFilesAuto{
	width:auto;
	height:200px;
	border:#CCC 1px solid;
}
#imagesBox{
	width:auto;
	height:198px;
	float:left;
}
.imagesItem{
	width:170px;
	height:198px;
	float:left;
	background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
}
#imgesFiles{
	width:170px;
	height:198px;
	float:left;
	position:relative;
	border-right:#CCC 1px solid;
}
#imgesFiles span{
	position:absolute;
	font-size:126px;
	display:block;
	width:170px;
	text-align:center;
	height:198px;
	color:#CCC;
}

var index = 1;
var fromdata = new FormData();
$("#uploadImage").on("change", function(){
	
	//var mFiles = new FromData();
    // Get a reference to the fileList
    var files = !!this.files ? this.files : [];
    // If no files were selected, or no FileReader support, return
    if (!files.length || !window.FileReader) return;
    // Only proceed if the selected file is an image
    if (/^image/.test( files[0].type)){
        // Create a new instance of the FileReader
        var reader = new FileReader();
        // Read the local file as a DataURL
        reader.readAsDataURL(files[0]);
		
		fromdata.append("photo"+index, files[0]);
        // When loaded, set image data as background of div
        reader.Onloadend= function(){
       $("#imagesBox").show();
	   $("#imagesBox").append("
");
       $("#imagesItem"+index).css("background-image", "url("+this.result+")");
         index++;
        }
  
    }
  
});

$("#btn1").click(function(){
	  //alert("__URL__");
	  $.ajax({
		  url: "__URL__/addInformation",
		  type: "POST",
		  data: fromdata,
		  processData: false,  // 告诉jQuery不要去处理发送的数据
		  contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
		  success:function(data){
                        console.log(data);
                    },
          error:function(XmlHttpRequest,textStatus,errorThrown){
                        console.log(XmlHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
		});
	
});

$upload = new \Think\Upload();// 实例化上传类
	    $upload->maxSize   =     3145728 ;// 设置附件上传大小
	    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
	    $upload->rootPath  =     './Public/Uploads/'; // 设置附件上传根目录
	    $upload->savePath  =     ''; // 设置附件上传（子）目录
	    // 上传文件 
	    $info   =   $upload->upload();
	    if(!$info) {// 上传错误提示错误信息
	        $this->error($upload->getError());
	    }else{// 上传成功
	        $this->success('上传成功！');
	    }

用其他ThinkPHP版本的，实例化上传类的方式有点区别，请自行调节

最后贴一张上传成功后的目录