一鍵上傳(ocUpload)
OCUpload為jQuery的外掛(One Click Upload),意思為一鍵上傳,封裝了對於檔案上傳的一些方法,只需幾行程式碼,檔案上傳優雅而簡潔。 對於傳統的檔案上傳,只是通過input標籤,通過設定enctype為multipart/form-data,選中檔案後還需點選按鈕,提交表單,才能在後臺進行相關欄位解析,通過流來進行檔案上傳,上傳成功後,頁面多半要重新整理,無法給使用者良好的體驗。OCUpload實現了頁面“不重新整理”,選擇檔案後直接上傳,不需要選中檔案後再點選按鈕上傳表單。
ajax不能做檔案上傳。
外掛使用步驟
在pom.xml中匯入ocupload的座標:
<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.0.0</version> </dependency>
1. 在頁面中引入OCUpload外掛的js檔案
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>
2. 在頁面中提供任意一個元素來“佔位子”(上傳檔案一般選擇按鈕,所以這裡利用easyui定義一個按鈕)
<body> <a id="import" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">上傳文件</a> </body>
3. 在head中給id為import的按鈕新增upload事件,這是OCUpload的上傳方法,引數為json物件。
由於是簡單入門,在這裡即使用三個主要的屬性:
action(處理上傳檔案的後臺action路徑),name(給檔案設定name,便於後臺通過name獲取),onComplete(引數為function,執行上傳完畢的回撥函式)。
<script type="text/javascript"> $(function(){ $("#import").upload({ action:'${pageContext.request.contextPath}/regionAction_importXls', name:'upload', onComplete: function (data, self, element) { if(data=='1'){ $.messager.alert("提示資訊","資料匯入成功!","info"); }else{ $.messager.alert("提示資訊","資料匯入失敗!","info"); } location.reload(); } }); }); </script>
到此便完成一鍵上傳的前臺程式碼,只需要後臺對上傳檔案進行解析處理即可完成檔案上傳。
原理:
- OCUpload將我們的linkbutton底部添加了一個帶有檔案input的form和一個display:none 不可見的iframe。
- 選擇檔案後form中的input觸發onChange事件,直接提交表單,實現了選擇檔案後直接上傳
- 檔案上傳後,本來頁面是要重新整理的,但是OCUpload將target指向底部隱藏的iframe,使得隱藏的iframe重新整理,從而達到我們的頁面“不重新整理”的效果
官方上傳例子:
$(element).upload({ name: 'file',//上傳元件的name屬性,即<input type='file' name='file'/> action: '',//向伺服器請求的路徑 enctype: 'multipart/form-data',//mime型別,預設即可 params: {},//請求時額外傳遞的引數,預設為空 autoSubmit: true,//是否自動提交,即當選擇了檔案,自動關閉了選擇視窗後,是否自動提交請求。 onSubmit: function() {},//提交表單之前觸發事件 onComplete: function() {},//提交表單完成後觸發的事件 onSelect: function() {}//當用戶選擇了一個檔案後觸發事件 });
注意:OCUpload只是在前臺頁面中把檔案上傳,上傳之後需要在後臺對檔案進行解析,這裡使用到了apache POI對excel檔案進行解析。