程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> JAVA綜合教程 >> 多文件上傳artDialog+plupload,artdialogplupload

多文件上傳artDialog+plupload,artdialogplupload

編輯:JAVA綜合教程

多文件上傳artDialog+plupload,artdialogplupload


一、效果展示

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

二、介紹

長話短說,采用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" >
4         <div id="choosefile">
5             <span>單個文件支持小於100M</span><br /> <a id="uploadify" href="javascript:void(0);">選擇文件</a>
6         </div>
7         <div id="uploadfileQueue" ></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     }

 

六、最後

如果要完整的代碼可以給我留言,我發給你

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved