Multi-File Upload artDialog + plupload, artdialogplupload

Multi-File Upload artDialog + plupload, artdialogplupload
I. effect display

Including the File Upload panel and file upload list

II. Introduction

To put it short, spring MVC mybatis maven mysql is used to implement The Multifile upload function. The download uses a stream.

I will open a blog to introduce the pages involved.

3. Prepare materials

Plupload

ArtDialog

There is also a js file for initializing the plug-in.

These can be downloaded directly from my shared connection.

Link: http://pan.baidu.com/s/1c27cTAK password: btqj

You can also download jquery manually.

4. Front-end code

Introduce styles and js files

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 Code

_ Plupload (bound uuid, File Upload path );
① For example, the id of the current user is uuid. You can associate the user id with the file you uploaded, you can query all files uploaded by this user based on the user ID.
② This method is encapsulated. You can see in upload. js that the annotations in my method are very clear. You can also refer to the official documentation.

1 $(function() {2         3         $('#uploadBtn').click(function() {4             popUpDialog();5         });6         _plupload('test','${pageContext.request.contextPath}/uploadfile');7 8     });

Page code, a button, and a pop-up box

1 <a id = "uploadBtn" class = "optionbtn inline" href = "#"> File Upload </a> 2 <! -- Trigger dialog box --> 3 <div id = "uploadContent" style = "display: none; height: 300px; overflow-x: hidden; overflow-y: auto; "> 4 <div id =" choosefile "> 5 <span> a single file can be smaller than 100 MB </span> <br/> <a id =" uploadify "href =" javascript: void (0); "> select file </a> 6 </div> 7 <div id =" uploadfileQueue "style =" border: 1px solid # a7c5e2; height: 228px; width: 350px; "> </div> 8 </div> 9 <pre id =" console "> </pre>

 

V. Background code

I have not encapsulated it as a method. To make it clear, you can encapsulate it by yourself.

1/** 2 * File Upload request address 3*4 * @ param request 5 * @ param response 6 */7 @ RequestMapping ("uploadfile ") 8 public void upload (HttpServletRequest request, HttpServletResponse response) {9 10 bytes multipartRequest = (bytes) request; // binary upload 11 CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest. getFile ("file"); // get the file 12 13 String unid = UUID. rand OmUUID (). toString (). replace ("-", "");/* file primary key */14 String originalFilename = file. getOriginalFilename ();/* Original file name, including the suffix */15 String flieSize = String. valueOf (file. getSize ();/* file size */16 String path = null;/* file storage path */17 String punid = request. getParameter ("punid");/* Associate file punid */18 19 // save file 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 // if the folder does not exist, create the folder 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 // file size conversion 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 // store file information into database 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}

Here, a download method is provided, which uses the file stream to download Based on the file 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     }

 

There is also a deletion method

1/** 2 * Delete 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 // Delete local 13 boolean flag = false; 14 File file = new File (fileUpload. getPath (); 15 if (file. exists () {// Delete 16 flag = file if the path is file and is not empty. delete (); 17} 18 // delete database 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}

 

6. Conclusion

If you want the complete code, you can leave a message and I will send it to you.