jQuery OCUpload ——> 一鍵上傳插件

時間 2019-11-19

原文原文鏈接

OCUpload爲jQuery的插件(One Click Upload)，意思爲一鍵上傳，封裝了對於文件上傳的一些方法，只需幾行代碼，文件上傳優雅而簡潔。
對於傳統的文件上傳，只是經過input標籤，經過設置enctype爲multipart/form-data，選中文件後還需點擊按鈕，提交表單，才能在後臺進行相關字段解析，經過流來進行文件上傳，上傳成功後，頁面多半要刷新，沒法給用戶良好的體驗。OCUpload實現了頁面「不刷新」，選擇文件後直接上傳，不須要選中文件後再點擊按鈕上傳表單。javascript

ajax不能作文件上傳。java

插件使用步驟jquery

1. 在頁面中引入OCUpload插件的js文件ajax

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>

2. 在頁面中提供任意一個元素來「佔位子」（上傳文件通常選擇按鈕，因此這裏利用easyui定義一個按鈕）apache

<body>
  <a id="import" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">上傳文檔</a>
</body>

3. 在head中給id爲import的按鈕添加upload事件，這是OCUpload的上傳方法，參數爲json對象。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>

到此便完成一鍵上傳的前臺代碼，只須要後臺對上傳文件進行解析處理便可完成文件上傳。ui

原理：spa

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() {}//當用戶選擇了一個文件後觸發事件
        });