Jquery.ocupload一键上传

缺乏、安全感 2021-10-06 02:50 372阅读 0赞

### Jquery.ocupload一键上传使用 ###

*  OCUpload
 *  引入JS
 *  简单使用
 *  页面回显问题

# OCUpload #

OCUpload为jQuery的插件(One Click Upload)，实现了页面文件异步上传。  
使用一键上传，必须先引入Jquery。

# 引入JS #

下载地址：[https://pan.baidu.com/s/1IYg2PORFyG\_cx0yJCT6PTg][https_pan.baidu.com_s_1IYg2PORFyG_cx0yJCT6PTg] 提取码：wkh9

# 简单使用 #

（1）html

（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 代码参考  
![在这里插入图片描述][20181215213622349.png]

[https_pan.baidu.com_s_1IYg2PORFyG_cx0yJCT6PTg]: https://pan.baidu.com/s/1IYg2PORFyG_cx0yJCT6PTg
[20181215213622349.png]: /images/20211006/9abb5cfc20524c8e9837148275da0ffb.png