artDialog+plupload實現(xiàn)多文件上傳
Plupload簡介
Plupload是有TinyMCE的開發(fā)者開發(fā)的,為您的內(nèi)容管理系統(tǒng)或是類似上傳程序提供一個高度可用的上傳插件。Plupload 目前分為一個核心API 和一個jQuery上傳隊列部件,這樣使你可以直接使用或是自己定制。
一、效果展示
包括文件上傳面板以及文件上傳列表
二、介紹
長話短說,采用spring springMVC mybatis maven mysql,實現(xiàn)多文件上傳功能,下載使用的是流的形式。
其中涉及的分頁我會另開一片博客介紹。
三、準備材料
plupload
artDialog
還有一份初始化插件的js文件
這些可以直接從我的分享連接里面下載
鏈接:http://pan.baidu.com/s/1c27cTAK 密碼:btqj
還有jquery 這個自行下載
四、前臺代碼
引入樣式以及js文件
<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代碼
_plupload(綁定的uuid,文件上傳路徑);①關于綁定的uuid,我舉個例子,當前用戶的id就是uuid,你可以把用戶id和你上傳的文件相關聯(lián),以后查詢的話根據(jù)用戶id就能查詢這個用戶上傳的所有文件②這個方法是封裝過的,在upload.js里面能看到,我里面注釋寫的很清楚,也可以參考官方文檔
$(function() { 3 $('#uploadBtn').click(function() { popUpDialog(); }); _plupload('test','${pageContext.request.contextPath}/uploadfile'); });
頁面代碼,一個按鈕,一個彈出框
<a id="uploadBtn" class="optionbtn inline" href="#">文件上傳</a> <!-- 觸發(fā)彈出框 --> <div id="uploadContent" style="display: none; height: 300px; overflow-x: hidden; overflow-y: auto;"> <div id="choosefile"> <span>單個文件支持小于100M</span><br /> <a id="uploadify" href="javascript:void(0);">選擇文件</a> </div> <div id="uploadfileQueue" style="border: 1px solid #a7c5e2; height: 228px; width: 350px;"></div> </div> <pre id="console"></pre>
五、后臺代碼
我都沒有封裝成方法,為了看得明白,可以自己封裝一下
/** * 文件上傳請求地址 * * @param request * @param response */ @RequestMapping("uploadfile") public void upload(HttpServletRequest request, HttpServletResponse response) { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;// 二進制上傳 CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");// 獲取文件 String unid = UUID.randomUUID().toString().replace("-", "");/* 文件主鍵 */ String originalFilename = file.getOriginalFilename();/* 原文件名,包括后綴 */ String flieSize = String.valueOf(file.getSize());/* 文件大小 */ String path = null;/* 文件存儲路徑 */ String punid = request.getParameter("punid"); /* 關聯(lián)文件punid */ // 保存文件 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; // 如果文件夾不存在,就創(chuàng)建文件夾 File dir = new File(path); if (!dir.exists()) { dir.mkdirs(); } file.transferTo(dir); } catch (Exception e) { e.printStackTrace(); } } // 文件大小轉換 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); } // 存儲文件信息進數(shù)據(jù)庫 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); }
這里附帶一個下載的方法,是用文件流,根據(jù)文件id來進行下載
@RequestMapping("downloadfile") public void downLoadfile(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(); } } }
還有一個刪除方法
/** * 文件刪除 * * @param request * @param response */ @ResponseBody @RequestMapping("delfile") public Map<String, Object> delfile(HttpServletRequest request, HttpServletResponse response) { String unid = request.getParameter("unid"); FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid); // 刪除本地 boolean flag = false; File file = new File(fileUpload.getPath()); if (file.exists()) {// 路徑為文件且不為空則進行刪除 flag = file.delete(); } // 刪除數(shù)據(jù)庫 int result = fileUploadService.deleteByPrimaryKey(unid); if (result > 0) { flag = true; } Map<String, Object> map = new HashMap<String, Object>(); map.put("result", flag); return map; }
以上所述是小編給大家介紹的artDialog+plupload實現(xiàn)多文件上傳,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 分享2個jQuery插件--jquery.fileupload與artdialog
- artdialog的圖片/標題以及關閉按鈕不顯示的解決方法
- 給artDialog 5.02 增加ajax get功能詳細介紹
- artDialog 4.1.5 Dreamweaver代碼提示/補全插件 附下載
- artDialog雙擊會關閉對話框的修改過程分享
- JS中artdialog彈出框控件之提交表單思路詳解
- jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解
- plupload+artdialog實現(xiàn)多平臺上傳文件
- jQuery對話框插件ArtDialog在雙擊遮罩層時出現(xiàn)關閉現(xiàn)象的解決方法
- Jquery彈出窗口插件 LeanModal的使用方法
- 使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
- jQuery插件artDialog.js使用與關閉方法示例
相關文章
微信小程序getLocation 需要在app.json中聲明permission字段
這篇文章主要介紹了微信小程序getLocation 需要在app.json中聲明permission字段,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03JavaScript使用Blob文件流下載txt、pdf、圖片等文件,自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時自定義下載文件名,2023-08-08前端項目中報錯Uncaught?(in?promise)的解決方法
最近在做項目的時候控制臺報了一個錯Uncaught(in promise) false,這篇文章主要給大家介紹了關于前端項目中報錯Uncaught?(in?promise)的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04如何確保JavaScript的執(zhí)行順序 之實戰(zhàn)篇
我曾在文章《如何在多個頁面使用同一個HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現(xiàn)代瀏覽器可以并行的下載JavaScript(部分瀏覽器),但考慮到JavaScript的依賴關系,他們的執(zhí)行依然是按照引入順序進行的。2011-03-03開啟Javascript中apply、call、bind的用法之旅模式
在Javascript中,F(xiàn)unction是一種對象。Function對象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply,call 與 bind 均可以改變函數(shù)對象中this的指向。2015-10-10