jQuery插件OCUpload一键上传的使用

OCUpload即One Click Upload，意为一键上传

传统上传方式前台为form表单，并指定enctype属性值为multipart/form-data，写完表单，选择文件，点击提交按钮，后台根据前台进行相关字段解析，然后通过流的方式进行文件上传，上传完成后进行页面刷新或跳转。

有时候我们并不希望文件上传后，刷新页面，这个时候我们就用到了OCUpload，它的主要作用是不刷新页面上传文件(之前的ajax是不能上传文件的，现在新的ajax可以通过formData属性上传文件，jquery最好使用2.0以上版本)

使用方法：

第一步，将js文件引入

<scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>

第二步，在页面提供任意一个元素，如：

<input id="myButton" type="button" value="上传" />

第三步：调用插件提供的upload方法，动态修改HTML页面元素

<scripttype="text/javascript">
	$(function(){
		//页面加载完成后，调用插件的upload方法，动态修改了HTML页面元素
		$("#myButton").upload({
                name: 'file',//上传组件的name属性，即<input type='file' name='file'/>
                action: '',//向服务器请求的路径
                enctype: 'multipart/form-data',//mime类型，默认即可
                params: {},//请求时额外传递的参数，默认为空
                autoSubmit: true,//是否自动提交，即当选择了文件，自动关闭了选择窗口后，是否自动提交请求。
                onSubmit: function() {},//提交表单之前触发事件
                onComplete: function() {},//提交表单完成后触发的事件
                onSelect: function() {}//当用户选择了一个文件后触发事件
        });
	});
</script>

这样前台代码就写完了，后台根据发送的请求处理即可。

原理：

• OCUpload将我们的上传按钮底部添加了一个带有文件input的form和一个display:none 不可见的iframe。
• 选择文件后form中的input触发onChange事件，直接提交表单，实现了选择文件后直接上传
• 文件上传后，本来页面是要刷新的，但是OCUpload将target指向底部隐藏的iframe，使得隐藏的iframe刷新，从而达到我们的页面“不刷新”的效果