jQuery OCUpload ——> 一鍵上傳插件


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

     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的上傳方法,參數為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文件進行解析。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM