使用 springMVC 提供的文件上传须要在项目中加入两个 jar 包,对应的 maven 的依赖分别是:commons-io 和 commons-fileuploadhtml
<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
springMVC 的配置文件须要注入 sprigMVC 支持文件上传的类 CommonsMultipartResolver 的bean,bean 的 id 为multipartResolver,该 id 是固定的,springMVC 在加载时会去容器查找该 id 的bean,若容器中存在该 id,则支持文件上传,若不存在,则不支持文件上传前端
//html代码 图片上传:<input type="file" name="file1" multiple="multiple" id="file0" /> <img src="" id="img0"> <button id="ajax_upload">Ajax上传</button> //js 代码 $("#file0").change(function () { var formData = new FormData(); formData.append("file",document.getElementById("file0").files[0]); $.ajax({ url : "ajaxUpload", data : formData, type : "post", contentType:false, processData:false, dataType : "json", success : function(response){ if(response.dataState == "success"){ // 为 src 属性设置上传文件的相对路径,实现文件预览 $("#img0").attr("src",response.responseMap["fileUrl"]); }else{ alert(response.dataState); } } }); });
注:ajax 发起文件上传的请求时须要将 contentType 和 processType 都设置为 falseajax
使用 springMvc 实现文件上传时,congtroller 须要指定 MultipartFile 类型的参数来接收前端传来的文件数据spring
@RequestMapping(value = "ajaxUpload",produces = {"text/html;charset=UTF-8;","application/json;"}) @ResponseBody public ResponseResult ajaxUplod(ResponseResult responseResult, MultipartFile file, HttpServletRequest request){ // 获取上传文件的原始名称 String fileName = file.getOriginalFilename(); // 获取上传文件的后缀名 String ext = fileName.substring(fileName.lastIndexOf(".")); // 获取当前项目资源文件的绝对路径 StringBuilder stringBuilder1 = new StringBuilder(request.getSession().getServletContext().getRealPath("/")); String baseUrl = stringBuilder1.toString(); // 设置本地文件的相对路径 StringBuilder stringBuilder2 = new StringBuilder(File.separator); stringBuilder2.append("upload"); stringBuilder2.append(File.separator); stringBuilder2.append(Calendar.YEAR); stringBuilder2.append("-"); stringBuilder2.append(Calendar.MONTH); stringBuilder2.append("-"); stringBuilder2.append(Calendar.DATE); stringBuilder2.append(ext); String fileUrl = stringBuilder2.toString(); // 当前项目路径 + 文件存储的相对路径 = 上传文件存储的绝对路径 File localFile = new File(stringBuilder1.append(stringBuilder2).toString()); Map<String,Object> map = new HashMap(); // 将文件的相对路径返回给前端实现文件预览 map.put("fileUrl",fileUrl); if(!localFile.exists()){ localFile.mkdirs(); } try { file.transferTo(localFile); responseResult.setDataState("success"); responseResult.setMsg("上传成功"); responseResult.setResponseMap(map); } catch (IOException e) { responseResult.setDataState("fail"); responseResult.setMsg("上传失败"); e.printStackTrace(); } return responseResult; }
注:json