第一步: 配置springMVC如图所示
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"/> <property name="maxUploadSize" value="10485760"/> </bean> |
(PS:是在SpringMVC配置文件中配置,id必须为multipartResolver)
第二步:jsp中form表单的样式
需要注意的是enctype="multipart/form-data"
enctype有一下几种值:
application/x-www-form-urlencoded :在发送前编码所有字符(默认)
multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
text/plain:空格转换为 "+" 加号,但不对特殊字符编码。
代码如下:
<form action="nihao.do" method="post" enctype="multipart/form-data" name="form"> <input type="file" value="图片" name="file" id="file" onchange="changeToop()"/> 图片预览:<img id="myimg" /> <input type="submit" value="上传" /> </form> |
<script type="text/javascript"> function f(){ var r= new FileReader(); f=document.getElementById('b').files[0]; r.readAsDataURL(f); r.onload=function (e) { //document.getElementById('img').src=""; document.getElementById('img').src = this.result; }; } //定义id选择器 function $(id){ return document.getElementById(id); } function changeToop(){ var file = $("file"); if(file.value==''){ //设置默认图片 $("myimg").src=''; }else{ preImg("file","myimg"); } } //获取input[file]图片的url Important function getFileUrl(fileId) { var url; var file = $(fileId); var agent = navigator.userAgent; if (agent.indexOf("MSIE")>=1) { url = file.value; } else if(agent.indexOf("Firefox")>0) { url = window.URL.createObjectURL(file.files.item(0)); } else if(agent.indexOf("Chrome")>0) { url = window.URL.createObjectURL(file.files.item(0)); } console.log(url); return url; } //读取图片后预览 function preImg(fileId,imgId) { var imgPre =$(imgId); imgPre.src = getFileUrl(fileId); } </script> |
第三步:后台文件上传下载方法
代码如下:
/** * 文件上传下载 * @param request * @param response * @return */ @RequestMapping(value="nihao.do",method=RequestMethod.POST) public ResponseEntity<byte[]> test(HttpServletRequest request,HttpServletResponse response){ /******************** 原始文件下载****************************** * if (file == null || !file.exists()){ return; } OutputStream out = null; try { response.reset(); response.setContentType("application/octet-stream; charset=utf-8"); response.setHeader("Content-Disposition", "attachment; filename=" + file.getName()); out = response.getOutputStream(); out.write(FileUtils.readFileToByteArray(file)); out.flush(); } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { try { out.close(); } catch (IOException e) { e.printStackTrace(); } } } *******************************************************************************/ /*********************SpringMVC上传文件***********************/ //获取Servlet的运行路径下的imgs文件夹作为上传图片的存储路径 String uploadRootPath = request.getServletContext().getRealPath(""); try{ MultipartHttpServletRequest mulRequest = request instanceof MultipartHttpServletRequest ? (MultipartHttpServletRequest)request : null; Iterator<String> fileNames = mulRequest.getFileNames(); CommonsMultipartFile multipartFile = null; if (fileNames.hasNext()) { // 遍历请求中的图片信息 String inputName = fileNames.next(); // 图片对应的参数名 multipartFile = (CommonsMultipartFile)mulRequest.getFile(inputName); String fileName = multipartFile.getOriginalFilename(); //原文件名 //String tomcat_path = System.getProperty( "user.dir" ); 获取eclipse路径 //String pic_path = tomcat_path+"\\wtpwebapps"+path+"\\"; OutputStream output = new FileOutputStream(uploadRootPath+"\\"+fileName); byte [] b = multipartFile.getBytes(); output.write(b); output.close(); /*****************************************下载文件**************************************************************/ File file = new File(uploadRootPath+"\\"+fileName); String dfileName = new String(fileName.getBytes("gb2312"), "iso8859-1"); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); headers.setContentDispositionFormData("attachment", dfileName); return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file), headers, HttpStatus.CREATED); } }catch(IOException e){ System.out.println("异常:"+e.getMessage()+":\n"+e); return null; } return null; } |