java实现多文件上传前台图片回显--ajax与form两种方式

（一）前台

—ajax-------表单内容
注意：
enctype=“multipart/form-data” 这是表单设置必须的格式
多文件上传，上传框的name要都一样，等于发送了一个MultipartFile[]数组

```css
<form id="test" enctype="multipart/form-data" >
     <div class="clearfix xm-address-list" id="checkoutAddrList" style="height: 400px;">
	<div class="item use-new-addr"  id="J_useNewAddr" data-state="off" style="position:relative;height: 200px;">
             <span class="iconfont icon-add">
             <input name="pic" value="" type="file"  id="input1" onchange="upload1(event)">
             <img class="pics" id="theone" src="../redshoping/images/add_cart.png" />
             </span> 
           	  点击上传商品图片  		 
    </div>
    <div class="item use-new-addr"  id="J_useNewAddr" data-state="off" style="position:relative">
             <span class="iconfont icon-add">
             <input name="pic" value="" type="file" id="input2" onchange="upload2(event)">
             <img class="pics" id="thetwo" src="../redshoping/images/add_cart.png" />
             </span> 
           	  点击上传商品图片		 
    </div>
	</div>
    <button type="button" class="layui-btn" onclick="uploadpic()">提交</button>
	</form>

****---js-----****
input的onchange是图片上传并回显到页面
```javascript
function upload1(e) {
       // console.info(e.target.files[0]);//图片文件        
       // console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {            	
               $('#theone').attr('src',this.result);
               // e.target.result; //这个就是图片的流，可以直接展示到页面上
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);   
    }

---ajax---点击提交

```javascript
 function uploadpic(){    
	var form=new FormData(document.getElementById("test"));	
	//form.append("file2",$("#input2")[0].files[0]);
	$.ajax({
		url:"../multipartup",
		type:'POST',
		data:form,
		async:false,
		cache:false,
		processData:false,//因为data值是FormData对象，不需要对数据做处理。而processdata用于对data参数进行序列化处理 这里必须false
		contentType:false,//防止JQ对对其解析使后台不能正常解析数据
		success:function(res){
			console.log(res.p);
		}
});
}

注意：之前用ajax提交一直使用contenttype为json形式，这次后台接收时，一直提示 Current request is not a multipart request，后来发现ajax提交需要加上processData和contentType，因为ajax提交时，contentType默认是 “application/x-www-form-urlencoded”。即表单已经规定的提交到服务器解析的数据类型

----form----表单提交

<form action="../multipart" method="post" enctype="multipart/form-data" >
     <div class="clearfix xm-address-list" id="checkoutAddrList" style="height: 400px;">
	<div class="item use-new-addr"  id="J_useNewAddr" data-state="off" style="position:relative;height: 200px;">
             <span class="iconfont icon-add">
             <input name="pic" value="" type="file"  id="input1" οnchange="upload1(event)">
             <img class="pics" id="theone" src="../redshoping/images/add_cart.png" />
             </span> 
           	  点击上传商品图片  		 
    </div>
    <div class="item use-new-addr"  id="J_useNewAddr" data-state="off" style="position:relative">
             <span class="iconfont icon-add">
             <input name="pic" value="" type="file" id="input2" οnchange="upload2(event)">
             <img class="pics" id="thetwo" src="../redshoping/images/add_cart.png" />
             </span> 
           	  点击上传商品图片		 
    </div>
	</div>
    <button type="submit" class="layui-btn">提交</button>
	</form>

（二）后台接收

@RequestMapping("multipartup")
//requestParam要写才知道是前台的那个数组
public @ResponseBody String fileupload(@RequestParam("pic") MultipartFile[] files,HttpServletRequest request) throws IllegalStateException, IOException {
	String json="";
	long startTime=System.currentTimeMillis();
	String filepath=request.getSession().getServletContext().getRealPath("/");//此处是为了将保存的文件在Tomcat的webapp下与项目文件同一路径，防止服务器移除文件，保存的图片丢失
	File ww=new File(new File(filepath).getParent()+"/userUploadPics");
	if(!ww.exists())
		ww.mkdirs();
	
	if(files!=null&&files.length>0) {
		for(int i=0;i<files.length;i++) {
			MultipartFile file=files[i];
			if(!file.isEmpty()) {
				String filename=file.getOriginalFilename();
				/*int pos=filename.lastIndexOf(".");
				String ff;
				if(pos>0) {
					ff=startTime+i+filename.substring(pos);
				}else {
					ff=startTime+"";
				}*/
				filename=ww.getPath()+"/"+filename;
				file.transferTo(new File(filename));
				String p="/userUploadPics"+filename;
				System.out.println(p+"-----------");
				//json="{\"status\":1,\"url\":\""+p+"\"}";
			}
		}
	}
	
	return json;
	}