(一)前台
—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;
}