One-click upload method of jquery plug-in ocupload

This article mainly shares with you a one-click upload method of the jquery plug-in ocupload. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

Usage of jquery ocupload(one-click upload):

<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入文件上传的ocupload -->
<script type="text/javascript" src="../../js/ocupload/jquery.ocupload-1.1.2.js"></script>

jquery ocupload one-click upload principle:

Click the upload button, which has a hidden The form form, the enctype attribute of the form is multipart/form-data, the form submission method is post submission, there is an input box in the form--> , use onChange event monitoring, when the form is submitted, the iframe hidden inside realizes page file upload without refreshing.

jquery ocupload front page writing:

$("#button-import").upload({
	//name 默认为file
	action : 文件上传的后台路径,
	onSelect : function(){
	    //选中文件关闭自动提交
	    this.autoSubmit = false;
	    //判定文件格式
	    var filename = this.filename();
	    var regex = 通过文件后缀名规定文件类型的正则;
	    if(regex.test(filename)) {
	        //满足正则表达式
	        this.submit();
	    }else{
	        $.messager.alert("警告！","..","warning");
	    }
	},
	onComplete : function(response){
	    alert("上传成功...");
	}
});

Backend page receives and parses uploaded files...

Related recommendations:

[JavaScript]——One-click upload plug-in

jquery ocupload one-click file upload application

The use of jQuery plug-in OCUpload one-click upload

The above is the detailed content of One-click upload method of jquery plug-in ocupload. For more information, please follow other related articles on the PHP Chinese website!