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

ajax不能做文件上传。

插件使用步骤

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文件进行解析。

jQuery OCUpload ——> 一键上传插件的更多相关文章

  1. jquery ocupload一键上传文件应用

    直接上栗子 这是官方文档栗子 var myUpload = $(element).upload({ name: 'file', action: '', enctype: 'multipart/form ...

  2. jQuery OCUpload一键上传文件

    1 引入相关的js文件 <!--引入OCUpload的js文件,之前需要引入jQuery的js文件 --> <script type="text/javascript&qu ...

  3. 赞！带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  4. 带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...

  5. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  6. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  7. Jquery学习---一键上传

    一键上传 jar包下载 jquery代码 $(function () { $(".uploadfile").upload({ action: 'CourseXMLFileUploa ...

  8. 详解jQuery uploadify文件上传插件的使用方法

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDem ...

  9. Jquery的一键上传组件OCUpload及POI解析Excel文件

    第一步:将js文件引入页面 <script type="text/javascript" src="${pageContext.request.contextPat ...

随机推荐

  1. PHP无限极分类详谈

    当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱,代码 ...

  2. AC日记——[HEOI2012]旅行问题 bzoj 2746

    2746 思路: 建立ac自动机,然后把fail树抽出来: 然后在fail树上走lca(神奇): 代码: #include <cstdio> #include <vector> ...

  3. Redis 源码走读（二）对象系统

    Redis设计了多种数据结构,并以此为基础构建了多种对象,每种对象(除了新出的 stream 以外)都有超过一种的实现. redisObject 这个结构体反应了 Redis 对象的内存布局 type ...

  4. pycurl mac 安装报错Curl is configured to use SSL,

    1.使用安装第三方插件的方式安装pycurl:pip3 install pycurl 报错提示如下: Curl is configured to use SSL, but we have not be ...

  5. 洛谷 P1182 数列分段`Section II`【二分答案】

    [代码]: #include<bits/stdc++.h> const double eps = 1e-8; const int maxn = 1e6+5; #define inf 0x3 ...

  6. POJ 1703 Find them, Catch them【种类/带权并查集+判断两元素是否在同一集合/不同集合/无法确定+类似食物链】

      The police office in Tadu City decides to say ends to the chaos, as launch actions to root up the ...

  7. CocoaPods 2017最新、最快安装和使用说明

    2017 - 11 - 29 更新 记录: 今天把系统升级到了最新的10.13 也就是high sierra,导入snapKit的时候Cocoapods的时候出现了下面的问题: -bash: /usr ...

  8. POJ 3168 Barn Expansion （几何基础）

    [题目链接] http://poj.org/problem?id=3168 [题目大意] 给出一些矩形,没有相交和包含的情况,只有相切的情况 问有多少个矩形没有相切或者边角重叠 [题解] 我们将所有的 ...

  9. Asp.Net MVC part1

    路由简介在Global中注册了路由数据包括:默认Controller,默认Action,请求地址匹配路由规则 约定大于配置为了尽量少的配置,于是将常用的配置作为默认约定,如果不同则进行少量配置主要从存 ...

  10. iOS 灵活,简易,扩展性强的气泡提示框LFBubbleView(含源码)

    一.效果图 二.使用方法 使用简单,4行代码集成. _bubbleView = [[LFBubbleView alloc] initWithFrame:CGRectMake(, , , )]; _bu ...