[Ajax]上传文件

首先上传文件是基于两个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(); } }