你的位置:首页 > Java教程

[Java教程]多文件上传artDialog+plupload


一、效果展示

包括文件上传面板以及文件上传列表

二、介绍

长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式。

其中涉及的分页我会另开一片博客介绍。

三、准备材料

plupload

artDialog

还有一份初始化插件的js文件

这些可以直接从我的分享连接里面下载

链接:http://pan.baidu.com/s/1c27cTAK 密码:btqj

还有jquery 这个自行下载

四、前台代码

引入样式以及js文件

1 <link rel="stylesheet" href="resources/css/plupload.css" type="text/css">2 3 <script src="resources/js/jquery.min.js"></script>4 <script src="resources/upload/plupload.full.min.js"></script>5 <script src="resources/artDialog4.1.7/artDialog.source.js?skin=blue"></script>6 <script src="resources/js/upload.js"></script>


js代码

 _plupload(绑定的uuid,文件上传路径);
①关于绑定的uuid,我举个例子,当前用户的id就是uuid,你可以把用户id和你上传的文件相关联,以后查询的话根据用户id就能查询这个用户上传的所有文件
②这个方法是封装过的,在upload.js里面能看到,我里面注释写的很清楚,也可以参考官方文档
1 $(function() {2     3     $('#uploadBtn').click(function() {4       popUpDialog();5     });6     _plupload('test','${pageContext.request.contextPath}/uploadfile');7 8   });

 页面代码,一个按钮,一个弹出框

1 <a id="uploadBtn" class="optionbtn inline" href="#">文件上传</a>2   <!-- 触发弹出框 -->3   <div id="uploadContent" style="display: none; height: 300px; overflow-x: hidden; overflow-y: auto;">4     <div id="choosefile">5       <span>单个文件支持小于100M</span><br /> <a id="uploadify" href="javascript:void(0);">选择文件</a>6     </div>7     <div id="uploadfileQueue" style="border: 1px solid #a7c5e2; height: 228px; width: 350px;"></div>8   </div>9   <pre id="console"></pre>

 

五、后台代码

我都没有封装成方法,为了看得明白,可以自己封装一下

 1   /** 2    * 文件上传请求地址 3    *  4    * @param request 5    * @param response 6   */ 7   @RequestMapping("uploadfile") 8   public void upload(HttpServletRequest request, HttpServletResponse response) { 9 10     MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;// 二进制上传11     CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");// 获取文件12 13     String unid = UUID.randomUUID().toString().replace("-", "");/* 文件主键 */14     String originalFilename = file.getOriginalFilename();/* 原文件名,包括后缀 */15     String flieSize = String.valueOf(file.getSize());/* 文件大小 */16     String path = null;/* 文件存储路径 */17     String punid = request.getParameter("punid"); /* 关联文件punid */18 19     // 保存文件20     if (file != null) {21       try {22         String basePath = request.getSession().getServletContext().getRealPath("/uploadfile");23         SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");24         String subPath = sdf.format(new Date());25         path = basePath + subPath + unid + File.separator + originalFilename;26 27         // 如果文件夹不存在,就创建文件夹28         File dir = new File(path);29         if (!dir.exists()) {30           dir.mkdirs();31         }32         file.transferTo(dir);33       } catch (Exception e) {34         e.printStackTrace();35       }36     }37 38     // 文件大小转换39     long kb = 1024;40     long mb = kb * 1024;41     long gb = mb * 1024;42     long size = Long.parseLong(flieSize);43     if (size >= gb) {44       flieSize = String.format("%.1f GB", (float) size / gb);45     } else if (size >= mb) {46       float f = (float) size / mb;47       flieSize = String.format(f > 100 ? "%.0f MB" : "%.1f MB", f);48     } else if (size >= kb) {49       float f = (float) size / kb;50       flieSize = String.format(f > 100 ? "%.0f KB" : "%.1f KB", f);51     } else {52       flieSize = String.format("%d B", size);53     }54 55     // 存储文件信息进数据库56     FileUpload fileUpload = new FileUpload();57     fileUpload.setUnid(unid);58     fileUpload.setOriginalFilename(originalFilename);59     fileUpload.setFlieSize(flieSize);60     fileUpload.setPath(path);61     fileUpload.setPunid(punid);62     SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");63     fileUpload.setFlieTime(df.format(new Date()));64     fileUploadService.insert(fileUpload);65   }

 这里附带一个下载的方法,是用文件流,根据文件id来进行下载

 1   @RequestMapping("downloadfile") 2   public void downLoadfile(HttpServletRequest request, HttpServletResponse response) { 3     String unid = request.getParameter("unid"); 4     FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid); 5     if (fileUpload != null) { 6       try { 7         String filename = new String(fileUpload.getOriginalFilename().getBytes("GBK"), "ISO-8859-1"); 8         String path = fileUpload.getPath(); 9         response.setCharacterEncoding("utf-8");10         response.setContentType("application/octet-stream");11         response.setHeader("Content-Disposition", "attachment;fileName=" + filename);12         response.setHeader("Content-Length", fileUpload.getFlieSize());13 14         InputStream inputStream = new FileInputStream(new15          File(path));16         OutputStream os = response.getOutputStream();17         byte[] b = new byte[2048];18         int length;19         while ((length = inputStream.read(b)) > 0) {20         os.write(b, 0, length);21          }22          os.close();23          inputStream.close();24       } catch (FileNotFoundException e) {25         e.printStackTrace();26       } catch (IOException e) {27         e.printStackTrace();28       }29     }30   }

 

还有一个删除方法

 1   /** 2    * 文件删除 3    *  4    * @param request 5    * @param response 6   */ 7   @ResponseBody 8   @RequestMapping("delfile") 9   public Map<String, Object> delfile(HttpServletRequest request, HttpServletResponse response) {10     String unid = request.getParameter("unid");11     FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid);12     // 删除本地13     boolean flag = false;14     File file = new File(fileUpload.getPath());15     if (file.exists()) {// 路径为文件且不为空则进行删除16       flag = file.delete();17     }18     // 删除数据库19     int result = fileUploadService.deleteByPrimaryKey(unid);20     if (result > 0) {21       flag = true;22     }23     Map<String, Object> map = new HashMap<String, Object>();24     map.put("result", flag);25     return map;26   }

 

六、最后

如果要完整的代码可以给我留言,我发给你