一鍵上傳（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檔案進行解析。