Jquery.ocupload一鍵上傳使用

• OCUpload
• 引入JS
• 簡單使用
• 頁面回顯問題

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 程式碼參考