OCUpload的简单介绍与使用

Posted 2020-10-06 高压锅里的小白

　　 OCUpload (One Click Upload)译成中文就是一键上传的意思。它是JQuery的一个插件。 
　　 对于传统的文件上传，只能通过form表单，将enctype设置为multipart/form-data，选中文件后还需在页面点击submit提交按钮，提交表单，才能在后台接收上传的文件并进行相关字段解析，上传成功后，页面还要刷新，这样并不符合我们的某些实际需求。如果要用ajax进行文件上传达到不刷新页面的效果，这样也是不对的，因为ajax不支持文件上传，这是因为response原因，一般请求浏览器是会处理服务器输出的response，例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的，说白点就是js无法调用到浏览器的下载处理机制和程序。那这时想要达到上传页面并不刷新的效果怎么把呢？？？我们可以这么做。

<iframe name="text" style="display:none"></iframe>
<form target="text" action="xxx" method="post" enctype="multipart/form-data">
  <input type="file" name="myFile"/>
  <input type="submit" value="upload"/>         
</form>

　　通过这种方式上传文件，刷新的页面就变成了这个iframe，而且设置的隐藏我们看不到，而我们自己所用的页面就不会刷新，通过这种方式达到了一个不刷新页面上传文件的效果。

　　而OCUpload就是采用了这种方式，只是进行了封装我们看不到。接下来就讲一讲怎么使用UCOpload。

　　首先引入必要的js文件，因为是jquery的插件所以在引入jquery.ocupload-1.1.2.js之前我们还要引入jquery的js文件。

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

　　第二步在页面中任意提供一个元素

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

　　第三部调用插件提供的upload方法，动态修改html页面元素。

<script type="text/javascript">
  $(function () {  
                $("#myButton").upload({  
                    action: ‘xxx‘,                                  //你所要向服务器请求的的路径，必填
                    name: ‘myFile‘,                                 //上传组件的name的值,不写默认是file
　　　　　　　　　　　　enctype: ‘multipart/form-data‘,                 //mime类型，使用默认就好
                    params: {}，  　　　　　　　　　　　　　　           //请求时额外传递的参数，默认是为空的   
                    onSelect: function (self, element) {            //当用户选择了一个文件后触发事件
                        this.autoSubmit = false;                    //当选择了文件后，关闭自动提交
                    },  
                    onSubmit: function (self, element){}，          //提交表单之前触发事件
　　　　　　　　　　　　autoSubmit: true,                              //是否自动提交，即当选择了文件，自动关闭了选择窗口后，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 是否自动提交请求。
                    onComplete: function (data, self, element){}   //提交表单完成后触发的事件
                });   
  });      
</script>

　　这样就完成了对OCUpload的使用。