一、效果展示
包括文件上传面板以及文件上传列表
二、介绍
长话短说，采用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(new
15 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 }
六、最后
如果要完整的代码可以给我留言，我发给你
时间： 2024-10-08 16:16:05