本文共 3606 字，大约阅读时间需要 12 分钟。
一、前端页面
1.下载jquery.uploadify
去uploadify官网（）下载压缩包，解压后放在如下路径：
2.html结构
form表单的上传控件部分：
| 1 2 3 4 5 6 7 8 | < div class="control-group"> < label class="control-label" for="coverImage">代表图</ label > < div class="controls"> < input type="hidden" th:field="*{coverImage}"> < input class="input-file" id="fileInput" type="file"> < img id="previewCoverImage" src="#"> </ div > </ div > |
3.页面引入uploadify
| 1 2 | < link rel="stylesheet" th:href="@{/static/uploadify/uploadify.css}”> < script type="text/javascript" th:src="@{/static/uploadify/jquery.uploadify.js}"></ script > |
4.自定义上传代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script th:inline= "javascript" > /*<![CDATA[*/ $(document).ready( function () { $( "#fileInput" ).uploadify( { 'swf' : /*[[@{/static/uploadify/uploadify.swf}]]*/ , 'uploader' : /*[[@{/upload/uploadCoverImage}]]*/ , //后台action地址 'queueID' : 'fileQueue' , 'auto' : true , 'multi' : false , 'buttonText' : '上传图片' , 'fileObjName' : 'pic' , //对应action中的参数字段名称 'width' : 70, 'height' : 20, 'onUploadSuccess' : function (file, data, response) { if (data != null ) { $( "#coverImage" ).val(data); //赋值给hidden控件，便于提交form表单 $( "#previewCoverImage" ).attr( "src" ,data); //复制给img控件用来预览 } } }); }); /*]]>*/ </script> |
二、站点配置
1.调整springmvc-servlet.xml文件，添加配置支持文件上传
| 1 2 | <!-- 支持上传文件 --> <bean id= "multipartResolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver" /> |
2.添加maven依赖
| 1 2 3 4 5 | <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version> 1.3 . 1 </version> </dependency> |
三、后台代码
1.controller
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @Controller @RequestMapping ( "/upload" ) public class UploadController { @RequestMapping (value = "/uploadCoverImage" , method = RequestMethod.POST) @ResponseBody public String uploadCoverImage( @RequestParam ( "pic" ) CommonsMultipartFile pic, HttpServletRequest req, HttpServletResponse response) throws IOException { //上传文件信息 String fileName = pic.getOriginalFilename(); String fileType = fileName.split( "[.]" )[ 1 ]; //生成文件信息 String filePath = req.getSession().getServletContext().getRealPath(FilePathConst.COVER_IMAGE_UPLOAD); String uuid = UUID.randomUUID().toString().replace( "-" , "" ); String uuidFileName = uuid + fileName; //保存文件 File f = new File(filePath + "/" + uuid + "." + fileType); FileUtils.uploadFile(pic.getInputStream(), uuidFileName, filePath); return SiteConst.SITE_DOMAIN + FilePathConst.COVER_IMAGE_UPLOAD + uuidFileName; } } |
2.FileUtils工具类
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | public class FileUtils { public static void uploadFile(InputStream is, String fileName, String filePath) { FileOutputStream fos = null ; BufferedOutputStream bos = null ; BufferedInputStream bis = null ; File file = new File(filePath); if (!file.exists()) { file.mkdirs(); } File f = new File(filePath + "/" + fileName); try { bis = new BufferedInputStream(is); fos = new FileOutputStream(f); bos = new BufferedOutputStream(fos); byte [] bt = new byte [ 4096 ]; int len; while ((len = bis.read(bt)) > 0 ) { bos.write(bt, 0 , len); } } catch (Exception e) { e.printStackTrace(); } finally { try { if ( null != bos) { bos.close(); bos = null ; } if ( null != fos) { fos.close(); fos = null ; } if ( null != is) { is.close(); is = null ; } if ( null != bis) { bis.close(); bis = null ; } } catch (Exception e) { e.printStackTrace(); } } } } |
本文转自 陈敬（Cathy） 博客园博客，原文链接：http://www.cnblogs.com/janes/p/7611980.html，如需转载请自行联系原作者