標(biāo)簽：options multipart ajax apach mime類型 action ipa upload color
OCUpload為jQuery的插件(One Click Upload)，意思為一鍵上傳，封裝了對于文件上傳的一些方法，只需幾行代碼，文件上傳優(yōu)雅而簡潔。
對于傳統(tǒng)的文件上傳，只是通過input標(biāo)簽，通過設(shè)置enctype為multipart/form-data，選中文件后還需點擊按鈕，提交表單，才能在后臺進行相關(guān)字段解析，通過流來進行文件上傳，上傳成功后，頁面多半要刷新，無法給用戶良好的體驗。OCUpload實現(xiàn)了頁面“不刷新”，選擇文件后直接上傳，不需要選中文件后再點擊按鈕上傳表單。
ajax不能做文件上傳。
插件使用步驟
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的上傳方法，參數(shù)為json對象。
由于是簡單入門，在這里即使用三個主要的屬性：
action(處理上傳文件的后臺action路徑)，name(給文件設(shè)置name，便于后臺通過name獲取)，onComplete(參數(shù)為function，執(zhí)行上傳完畢的回調(diào)函數(shù))。
<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("提示信息","數(shù)據(jù)導(dǎo)入成功!","info"); }else{ $.messager.alert("提示信息","數(shù)據(jù)導(dǎo)入失敗!","info"); } location.reload(); } });});</script>
到此便完成一鍵上傳的前臺代碼，只需要后臺對上傳文件進行解析處理即可完成文件上傳。
原理：
官方上傳例子：
$(element).upload({ name: ‘file‘,//上傳組件的name屬性，即<input type=‘file‘ name=‘file‘/> action: ‘‘,//向服務(wù)器請求的路徑 enctype: ‘multipart/form-data‘,//mime類型，默認(rèn)即可 params: {},//請求時額外傳遞的參數(shù)，默認(rèn)為空 autoSubmit: true,//是否自動提交，即當(dāng)選擇了文件，自動關(guān)閉了選擇窗口后，是否自動提交請求。 onSubmit: function() {},//提交表單之前觸發(fā)事件 onComplete: function() {},//提交表單完成后觸發(fā)的事件 onSelect: function() {}//當(dāng)用戶選擇了一個文件后觸發(fā)事件 });注意：OCUpload只是在前臺頁面中把文件上傳，上傳之后需要在后臺對文件進行解析，這里使用到了apache POI對excel文件進行解析。
標(biāo)簽：options multipart ajax apach mime類型 action ipa upload color
原文地址：http://www.cnblogs.com/zjfjava/p/7041183.html
聯(lián)系客服
