首先上传文件是基于两个JS库实现的
- jQuery (本人使用的jquery-2.1.4.js)
- ajaxfileupload.js (有多个版本,可能存在版本BUG)
HTML部分
<!-- 必须要有name和id属性-->
<input id="imgFile" type="file" name="fil"/>
JS部分
$(document).ready(function(){
/*
注意事项:
1>input file 必须要有name属性
2>ajaxFileUpload 中 dataType必须大写
不然google浏览器报错
*/
//当file选择文件后
$("#imgFile").on('change',function(){
$.ajaxFileUpload({
url:'fileController/fileUpload',//用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'imgFile', //文件上传域的ID
dataType: 'JSON', //返回值类型
success: function (data, status){
//服务器成功响应处理函数
alert(data);
},
error: function (data, status, e){
//服务器响应失败处理函数
//e 异常信息
alert(e);
}
});
});
});
后台部分
/**
* 注 : MultipartFile必须标注
* @RequestParam("fil")
* fil为前端file的name]
*
* UploadUtil.uploadImg()为后台上传方法,
* 内部会返回JSON数据,返回的为图片地址
*/
@RequestMapping("fileUpload")
public void fileUpload (HttpServletRequest request ,
HttpServletResponse response,
@RequestParam("fil") MultipartFile file){
try {
UploadUtil.uploadImg(request, response, file);
} catch (IOException e) {
e.printStackTrace();
}
}