使用MultipartFile接口
使用Commons FileUpload组建上传,需要下载commons-fileupload-x.y.jar和commons-io-x.y.jar文件
1、配置文件:在spring-mvc.xml中添加
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="1073741824" /><!-- 上传大小限制--> <property name="defaultEncoding" value="utf-8"></property> <property name="resolveLazily" value="true"></property> </bean>
2、控制器:
控制器接收一个MultipartFile file参数,
@RequestMapping(value = "/uploadfile.do") public @ResponseBody String saveProduct(HttpServletRequest rq,@RequestParam("file") MultipartFile file) { /* *调用文件处理工具类,也可以直接在控制器里写 *url为保存路径 */ saveFile(rq, file, url); return ""; }
3、工具类(为了代码更简洁,把文件存储代码封装为一个类)
public class SaveFile { /** * @param rq * request对象 * @param file * 需要保存的文件 * @param url * 文件保存路径类型 * * */ public String saveImage(HttpServletRequest rq, MultipartFile file, String url) { File imageFile = null; String fileName = null; Date d=new Date(); /* * 创建存储路径文件夹,在服务器目录下创建 */ File savePath = new File(rq.getServletContext().getRealPath(url)); if (!savePath.exists()) { savePath.mkdirs(); } if (null != file) { fileName = new Date().getTime()+new Random().nextInt(100)+file.getOriginalFilename(); imageFile = new File(rq.getServletContext().getRealPath(+url), fileName); try { file.transferTo(imageFile); } catch (IOException e) { e.printStackTrace(); } } return url+"/"+fileName; } }
4、前端提交
1、form表单提交需要在表单属性中添加enctype="multipart/form-data"
<form action="uploadfile.do" method="post" enctype="multipart/form-data"> <input class="file" type="file" name="file" ></input> </form>
2、ajax提交:需要通过FormData发送到服务端
1 <input class="file" type="file" onchange="uploadLogo(this)" 2 name="logo" value="123"></input> 3 4 5 6 7 function uploadLogo(file) { 8 var fileReader = new FileReader(); 9 var path = ""; 10 uploadImages(file.files[0]) 11 12 } 13 14 function uploadImages(file) { 15 var form = new FormData(); 16 form.append("logo", file); 17 18 $.ajax({ 19 type : "post", 20 url : "/PrySecret/uploadLogo.do", 21 data : form, 22 async : false, 23 cache : false, 24 contentType : false, 25 processData : false, 26 success : function(data, status) { 27 28 var path = "<c:url value='data'/>" 29 alert(data); 30 $("#logo")[0].src = "http://localhost:8080/PrySecret/data/" 31 + data;35 }, 36 error : function() { 37 alert("服务器异常"); 38 }, 39 complete : function() { 40 41 } 42 }); 43 }