jQuery OCUpload ——> 一鍵上傳插件
阿新 • • 發佈：2017-06-17
ons multi select 參數 option cat 觸發事件 inf blog
OCUpload為jQuery的插件(One Click Upload)，意思為一鍵上傳，封裝了對於文件上傳的一些方法，只需幾行代碼，文件上傳優雅而簡潔。
對於傳統的文件上傳，只是通過input標簽，通過設置enctype為multipart/form-data，選中文件後還需點擊按鈕，提交表單，才能在後臺進行相關字段解析，通過流來進行文件上傳，上傳成功後，頁面多半要刷新，無法給用戶良好的體驗。OCUpload實現了頁面“不刷新”，選擇文件後直接上傳，不需要選中文件後再點擊按鈕上傳表單。
ajax不能做文件上傳。
插件使用步驟
1. 在
<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文件進行解析。
jQuery OCUpload ——> 一鍵上傳插件