Introduction to Plupload
Plupload is developed by developers of TinyMCE, providing a highly available upload plug-in for your content management system or similar upload programs. Plupload is currently divided into a core API and a jQuery upload queue component, which allows you to use it directly or customize it yourself.
1. Effect display
Including file upload panel and file upload list
2. Introduction
To put it short, spring springMVC mybatis maven mysql is used to realize the multi-file upload function, and the download uses the form of streams.
I will open another blog to introduce the pages involved.
3. Prepare materials
plupload
artDialog
There is also a js file that initializes the plugin
These can be downloaded directly from my sharing connection
Link: http://pan.baidu.com/s/1c27cTAK Password: btqj
There is also jquery download
4. Front desk code
Introduce styles and js files
<link rel="stylesheet" href="resources/css/plupload.css" type="text/css"><script src="resources/js/jquery.min.js"></script><script src="resources/upload/plupload.full.min.js"></script><script src="resources/artDialog4.1.7/artDialog.source.js?skin=blue"></script><script src="resources/js/upload.js"></script>
js code
_plupload (binded uuid, file upload path); ① Regarding bound uuid, let me give an example. The current user's id is uuid. You can associate the user id with the file you upload. If you query in the future, you can query all files uploaded by the user id according to the user id. ② This method is encapsulated and can be seen in upload.js. The comments in my article are very clear, and you can also refer to the official document.
$(function() { 3 $('#uploadBtn').click(function() { popUpDialog(); }); _plupload('test','${pageContext.request.contextPath}/uploadfile'); });Page code, a button, a pop-up box
<a id="uploadBtn" href="#">File Upload</a> <!-- Trigger the pop-up box--> <div id="uploadContent" style="display: none; height: 300px; overflow-x: hidden; overflow-y: auto;"> <div id="choosefile"> <span>Single file supports less than 100M</span><br /> <a id="uploadify" href="javascript:void(0);">Select file</a> </div> <div id="uploadfileQueue" style="border: 1px solid #a7c5e2; height: 228px; width: 350px;"></div> </div> <pre id="console"></pre>
5. Background code
I don't have a method to encapsulate it, so I can encapsulate it myself in order to see it clearly
/** * File upload request address* * @param request * @param response */ @RequestMapping("uploadfile") public void upload(HttpServletRequest request, HttpServletResponse response) { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;// Binary upload CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");// Get file String unid = UUID.randomUUID().toString().replace("-", "");/* File primary key*/ String originalFilename = file.getOriginalFilename();/* Original file name, including the suffix*/ String flieSize = String.valueOf(file.getSize());/* File size*/ String path = null;/* File storage path*/ String punid = request.getParameter("punid"); /* Associated file punid */ // Save file if (file != null) { try { String basePath = request.getSession().getServletContext().getRealPath("/uploadfile"); SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/"); String subPath = sdf.format(new Date()); path = basePath + subPath + unid + File.separator + originalFilename; // If the folder does not exist, create a folder File dir = new File(path); if (!dir.exists()) { dir.mkdir(); } file.transferTo(dir); } catch (Exception e) { e.printStackTrace(); } } // File size conversion long kb = 1024; long mb = kb * 1024; long gb = mb * 1024; long size = Long.parseLong(flieSize); if (size >= gb) { flieSize = String.format("%.1f GB", (float) size / gb); } else if (size >= mb) { float f = (float) size / mb; flieSize = String.format(f > 100 ? "%.0f MB" : "%.1f MB", f); } else if (size >= kb) { float f = (float) size / kb; flieSize = String.format(f > 100 ? "%.0f KB" : "%.1f KB", f); } else { flieSize = String.format("%d B", size); } // Store file information into the database FileUpload fileUpload = new FileUpload(); fileUpload.setUnid(unid); fileUpload.setOriginalFilename(originalFilename); fileUpload.setFlieSize(flieSize); fileUpload.setPath(path); fileUpload.setPunid(punid); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); fileUpload.setFlieTime(df.format(new Date())); fileUploadService.insert(fileUpload); }Here comes a download method, which is to use file streams to download according to file id
@RequestMapping("downloadfile") public void downloadLoadfile(HttpServletRequest request, HttpServletResponse response) { String unid = request.getParameter("unid"); FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid); if (fileUpload != null) { try { String filename = new String(fileUpload.getOriginalFilename().getBytes("GBK"), "ISO-8859-1"); String path = fileUpload.getPath(); response.setCharacterEncoding("utf-8"); response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment;fileName=" + filename); response.setHeader("Content-Length", fileUpload.getFlieSize()); InputStream inputStream = new FileInputStream(new File(path)); OutputStream os = response.getOutputStream(); byte[] b = new byte[2048]; int length; while ((length = inputStream.read(b)) > 0) { os.write(b, 0, length); } os.close(); inputStream.close(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } }There is also a way to delete it
/** * File deletion* * @param request * @param response */ @ResponseBody @RequestMapping("delfile") public Map<String, Object> defile(HttpServletRequest request, HttpServletResponse response) { String unid = request.getParameter("unid"); FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid); // Delete local boolean flag = false; File file = new File(fileUpload.getPath()); if (file.exists()) {// If the path is a file and is not empty, delete flag = file.delete(); } // Delete the database int result = fileUploadService.deleteByPrimaryKey(unid); if (result > 0) { flag = true; } Map<String, Object> map = new HashMap<String, Object>(); map.put("result", flag); return map; }The above is the artDialog+plupload introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!