一键上传（ocUpload）

81 阅读 0 评论 54 点赞

我是靠谱客的博主独特裙子，最近开发中收集的这篇文章主要介绍一键上传（ocUpload），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

OCUpload为jQuery的插件(One Click Upload)，意思为一键上传，封装了对于文件上传的一些方法，只需几行代码，文件上传优雅而简洁。
对于传统的文件上传，只是通过input标签，通过设置enctype为multipart/form-data，选中文件后还需点击按钮，提交表单，才能在后台进行相关字段解析，通过流来进行文件上传，上传成功后，页面多半要刷新，无法给用户良好的体验。OCUpload实现了页面“不刷新”，选择文件后直接上传，不需要选中文件后再点击按钮上传表单。

ajax不能做文件上传。

插件使用步骤

在pom.xml中导入ocupload的坐标：

<dependency>
       <groupId>org.apache.poi</groupId>
       <artifactId>poi</artifactId>
       <version>4.0.0</version>
</dependency>

1. 在页面中引入OCUpload插件的js文件

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

2. 在页面中提供任意一个元素来“占位子”（上传文件一般选择按钮，所以这里利用easyui定义一个按钮）

<body>
  <a id="import" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">上传文档</a>
</body>

3. 在head中给id为import的按钮添加upload事件，这是OCUpload的上传方法，参数为json对象。

由于是简单入门，在这里即使用三个主要的属性：

action(处理上传文件的后台action路径)，name(给文件设置name，便于后台通过name获取)，onComplete(参数为function，执行上传完毕的回调函数)。

复制代码

<script type="text/javascript">
    $(function(){
        $("#import").upload({
        action:'${pageContext.request.contextPath}/regionAction_importXls',
        name:'upload',
        onComplete: function (data, self, element) { 
         if(data=='1'){
                $.messager.alert("提示信息","数据导入成功!","info");
            }else{
                $.messager.alert("提示信息","数据导入失败!","info");
            }
                location.reload();
        }
    });
});
</script>

复制代码

到此便完成一键上传的前台代码，只需要后台对上传文件进行解析处理即可完成文件上传。

原理：

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

官方上传例子：

复制代码

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

复制代码

注意：OCUpload只是在前台页面中把文件上传，上传之后需要在后台对文件进行解析，这里使用到了apache POI对excel文件进行解析。