jQuery OCUpload ——> 一键上传插件
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 ——> 一键上传插件的更多相关文章
- jquery ocupload一键上传文件应用
直接上栗子 这是官方文档栗子 var myUpload = $(element).upload({ name: 'file', action: '', enctype: 'multipart/form ...
- jQuery OCUpload一键上传文件
1 引入相关的js文件 <!--引入OCUpload的js文件,之前需要引入jQuery的js文件 --> <script type="text/javascript&qu ...
- 赞！带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- 带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...
- jquery uploadify文件上传插件用法精析
jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- Jquery学习---一键上传
一键上传 jar包下载 jquery代码 $(function () { $(".uploadfile").upload({ action: 'CourseXMLFileUploa ...
- 详解jQuery uploadify文件上传插件的使用方法
uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDem ...
- Jquery的一键上传组件OCUpload及POI解析Excel文件
第一步:将js文件引入页面 <script type="text/javascript" src="${pageContext.request.contextPat ...
随机推荐
- java 编码分析
三.源码分析: 更改字符串编码的步骤为: 1.调用String的getByte方法对字符串进行解码,得到字符串的字节数组(字节数组不携带任何有关编码格式的信息,只有字符才有编码格式) ...
- Submile text3 安装使用技巧
第一次用submile text3,发现还是有一些东西需要配置的,而且submile text3是最近发布的,和原来的submile text2还是有一些区别的.这两天自己配置了一下,用起来感觉还是不 ...
- virgo-tomcat没有任务错误日志的停掉的解决办法
最近virgo-tomcat总是无缘无故的down掉,用了下面的几种方法来解决这个问题,具体哪个方法生效了,目前还不清楚...1. 删掉了home/logs下面的很大的日志文件 2. 在.bash_p ...
- Java基础：GC机制
上一节,简单的介绍了java当中的内存模型,那么经常和内存模型一起提到的JAVA垃圾回收机制当然也需要在这里一并的总结一下. 所谓是垃圾回收机制,用通俗的话来说,就是将那些没有被任何变量引用的实例对象 ...
- PL SQL 基础
Oracle之PL/SQL学习笔记 自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整 ...
- Java 线程 锁
http://www.blogjava.net/tscfengkui/archive/2010/11/10/337709.html?opt=admin http://hi.baidu.com/xhxz ...
- 【R笔记】R语言中的字符串处理函数
内容概览 尽管R是一门以数值向量和矩阵为核心的统计语言,但字符串同样极为重要.从医疗研究数据里的出生日期到文本挖掘的应用,字符串数据在R程序中使用的频率非常高.R语言提供了很多字符串操作函数,本文仅简 ...
- inline-block 前世今生(转)
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...
- Grunt上手指南(转)
Grunt , javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本 ...
- Solr6 +mmseg4j+IK-Analyzer + SQLserver +DIH 完全配置
如今做任何一个系统都有搜索,而搜索界有著名的三剑客: solr/elasticsearch/sphinx solr/elasticsearch 为同一类的,都是基于lucene开发的产品,本人也早在几 ...