Jquery.ocupload一鍵上傳
阿新 • • 發佈:2018-12-16
Jquery.ocupload一鍵上傳使用
OCUpload
OCUpload為jQuery的外掛(One Click Upload),實現了頁面檔案非同步上傳。
使用一鍵上傳,必須先引入Jquery。
引入JS
<script src="../js/jquery-validation-1.14.0/lib/jquery.js"></script> <script type="text/javascript" src="../js/jquery.ocupload-1.1.2.js"></script>
下載地址:https://pan.baidu.com/s/1IYg2PORFyG_cx0yJCT6PTg 提取碼:wkh9
簡單使用
(1)html
<a id="uploadFile">上傳</a>
(2)JavaScript
//呼叫OCUpload外掛的方法 $("#uploadFile").upload({ action: basePath + "/upload/file", //提交的地址 name: "file", //上傳元件的name屬性,即<input type='file' name='file'/> enctype: 'multipart/form-data', //mime型別,預設即可 params: {}, //請求時額外傳遞的引數,預設為空 autoSubmit: true, //是否自動提交,即當選擇了檔案,自動關閉了選擇視窗後,是否自動提交請求。 onSubmit: function() {}, //提交表單之前觸發事件 onComplete: function(data) { //提交表單之後 }, onSelect: function() { //當用戶選擇了一個檔案後觸發事件 //當選擇了檔案後,關閉自動提交 this.autoSubmit = false; //校驗上傳的檔名是否滿足字尾為.xls或.xlsx var regex = /^.*\.(?:png|jpg)$/i; //this.filename()返回當前選擇的檔名稱 (ps:我使用這個方法沒好使,自己寫了一個獲取檔案的名的方法) $("[name = '"+this.name()+"']").val()) //alert(this.filename()); if(regex.test($("[name = '" + this.name() + "']").val())) { //通過校驗 this.submit(); } else { //未通過 } } });
頁面回顯問題
伺服器響應可使用:Content-Type:text/plain;charset=UTF-8
SpringMVC/SpringBoot 程式碼參考