- 浏览: 182306 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
yu505656166:
这个问题是怎么解决的啊?
spring mail 发送邮件,没有主题,没有收件人,显示乱码问题 -
dextersmake:
我的配置和你的差不多,调了有一些效果,但是还不是很满意。
YARN内存使用优化配置 -
kjkhi:
dxb350352 写道怎么用啊,运行完了也不知道取值的方法 ...
Apache POI组件使用eventusermodel模式读取Excel文档内容 -
dxb350352:
怎么用啊,运行完了也不知道取值的方法
Apache POI组件使用eventusermodel模式读取Excel文档内容 -
wanshijian:
相同问题,解决了!
使用cxf的wsdl2java是遇到的问题
之前找了很多关于更新文件上传进度条的资料,其大部分都是不断向后台获取数据实现更新的!
现在,我们使用commons-fileupload结合XMLHttpRequest实现,客户端Ajax更新上传进度,免去不断向服务器端获取数据,而影响效率。
这里使用Ext.MessageBox,实现最终效果
首先是通过使用Extjs官方提供的Ext.ux.form.FileUploadField结合commons-fileupload实现文件上传,我以前做了一篇关于实现这个功能的详细说明,这里就重复。如有需要,请看http://jayklin.iteye.com/blog/841602
在这一篇中,主要想探讨一下如何commons-fileupload和XMLHttpRequest协同工作,实现上传进度显示。
据我所知,XMLHttpRequest.send()方法只能向服务端发送文本信息,而对于二进制文件,需要做编码处理(没有深入研究!)。所以,如果直接用这个方法实现上传,可能需要的工作量会很大。但我们可以利用它实现客户端的上传进度条的更新!
在XMLHttpRequest中,有个onreadystatechange事件句柄。每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。ps:readyState有5个状态:
所以可以利用当readyState=3时,多次调用onreadychange事件实现进度条更新。
而主要实现,请看代码:
上面是定义一个upload方法。当执行send()方法后,readyState变为3。发送文件过程中不断调用xhr.upload.onprogress
而在Ext.form.FormPanel的beforeaction这个事件响应的时候,执行以下代码:
以上便能实现在客户端更新上传文件进度。附件fileuploadprogress源文件。
现在,我们使用commons-fileupload结合XMLHttpRequest实现,客户端Ajax更新上传进度,免去不断向服务器端获取数据,而影响效率。
这里使用Ext.MessageBox,实现最终效果
首先是通过使用Extjs官方提供的Ext.ux.form.FileUploadField结合commons-fileupload实现文件上传,我以前做了一篇关于实现这个功能的详细说明,这里就重复。如有需要,请看http://jayklin.iteye.com/blog/841602
在这一篇中,主要想探讨一下如何commons-fileupload和XMLHttpRequest协同工作,实现上传进度显示。
据我所知,XMLHttpRequest.send()方法只能向服务端发送文本信息,而对于二进制文件,需要做编码处理(没有深入研究!)。所以,如果直接用这个方法实现上传,可能需要的工作量会很大。但我们可以利用它实现客户端的上传进度条的更新!
在XMLHttpRequest中,有个onreadystatechange事件句柄。每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。ps:readyState有5个状态:
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
1 | Open | open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 |
2 | Sent | Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
4 | Loaded | HTTP 响应已经完全接收。 |
所以可以利用当readyState=3时,多次调用onreadychange事件实现进度条更新。
而主要实现,请看代码:
upload: function(id, params){ var file = this._files[id], name = this.getName(id), size = this.getSize(id); if (!file){ throw new Error('file with passed id was not added, or already uploaded or cancelled'); } var xhr = this._xhrs[id] = new XMLHttpRequest(); var self = this; xhr.upload.onprogress = function(e){ if (e.lengthComputable){ self._options.onProgress(id, name, e.loaded, e.total); } }; xhr.onreadystatechange = function(){ // the request was aborted/cancelled if (!self._files[id]){ return; } if (xhr.readyState == 4){ self._options.onProgress(id, name, size, size); if (xhr.status == 200){ var response; try { response = eval("(" + xhr.responseText + ")"); } catch(err){ response = {}; } self._options.onComplete(id, name, response); } else { self._options.onComplete(id, name, {}); } self._files[id] = null; self._xhrs[id] = null; } }; // build query string var queryString = '?qqfile=' + encodeURIComponent(name); for (var key in params){ queryString += '&' + key + '=' + encodeURIComponent(params[key]); } xhr.open("POST", this._options.action + queryString, true); xhr.send(file); }
上面是定义一个upload方法。当执行send()方法后,readyState变为3。发送文件过程中不断调用xhr.upload.onprogress
而在Ext.form.FormPanel的beforeaction这个事件响应的时候,执行以下代码:
var xhrhandler = new uploadprogress.UploadHandlerXhr({ action: "do-nothing.htm", onProgress: function(id, fileName, loaded, total){ // is only called for xhr upload this._updateProgress(id, loaded, total); }, onComplete: function(id, fileName, result){ }, _updateProgress: function(id, loaded, total){ if(loaded == total){ Ext.MessageBox.hide(); }else{ var i = loaded/total; Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed from '+uploadprogress.formatSize(total)); } } }); var id = xhrhandler.add(files[0]); xhrhandler.upload(id,{});
以上便能实现在客户端更新上传文件进度。附件fileuploadprogress源文件。
- fileuploadprogress.rar (1.4 KB)
- 下载次数: 213
发表评论
-
大数据处理--倒排索引
2014-06-28 14:08 4356简介 倒排索引源 ... -
大数据处理--BitSet
2014-06-28 11:01 1214java.util.BitSet可以按位存储。计算机中一个字 ... -
大数据处理--BloomFilter
2014-06-28 10:58 883BloomFilter——大规 ... -
hadoop 2.x升级异常
2014-06-19 11:54 22461、通过FileSystem这个API去访问hdfs上面的 ... -
Windows 编译Hadoop的Eclipse插件
2013-07-24 00:53 0http://www.cnblogs.com/fly ... -
log4j指定配置文件路径
2013-07-09 11:15 1875在默认情况下 log4j 会从WEB-INF/cl ... -
使用CXF发布和调用webservice
2013-05-08 16:14 1364依赖的JAR cxf-2.2.10.jar je ... -
Filter、Servlet、Listener区别与联系
2013-04-10 17:41 4147J2EE开发中,经常会使用到Filter、Servlet、L ... -
Apache POI组件使用eventusermodel模式读取Excel文档内容
2013-03-18 17:39 9021package com.test; import ja ... -
CXF之JAX-WS(转)
2012-12-18 17:31 1961CXF详解二 CXF之JAX-WS JAX-WS规范是一组 ... -
分析tomcat假死现象的过程
2012-10-15 15:50 0前段时间在公司遇到一个tomcat运行一段时间后(半个月左右 ... -
spring mail 通过HTTP代理发送邮件
2012-09-24 16:22 6587spring框架中org.spr ... -
多线程实现发送邮件功能
2012-09-14 18:44 11115通过Internet发送邮件,可能会在网络传输上面使用较多的 ... -
使用Spring mail通过socks代理发送邮件
2012-09-14 18:25 7042Spring框架提供了JavaMailSender接口及其实 ... -
plupload 上传组件,后台用java实现
2012-09-06 17:21 11427Plupload 是一个Web浏览器上的界面友好的文件上传模 ... -
POI读取大数据量的Excel文件
2012-09-06 11:58 14959POI读取Excel文件有两种方式,一种是使用usermod ... -
UML类图
2012-08-02 16:35 2016UML类图关系大全 1、关联双向关联:C1-C2:指 ... -
使用cxf的wsdl2java是遇到的问题
2012-03-13 10:50 3802对与同一个wsdl文件,我尝试过使用axis2是可以正常转过来 ... -
spring mail 发送邮件,没有主题,没有收件人,显示乱码问题
2012-03-06 14:02 4624使用spring框架风中的javamail发送邮件,遇到了一些 ... -
J2EE使用ireport做导出PDF操作
2012-03-02 17:21 2627首先,在lib中,加入一下jar: jasperreport ...
相关推荐
开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2...
赠送jar包:commons-fileupload-1.4.jar; 赠送原API文档:commons-fileupload-1.4-javadoc.jar; 赠送源代码:commons-fileupload-1.4-sources.jar; 赠送Maven依赖信息文件:commons-fileupload-1.4.pom; 包含...
赠送jar包:commons-fileupload-1.3.3.jar; 赠送原API文档:commons-fileupload-1.3.3-javadoc.jar; 赠送源代码:commons-fileupload-1.3.3-sources.jar; 赠送Maven依赖信息文件:commons-fileupload-1.3.3.pom;...
commons commons-fileupload历史版本jar包集合,包括src源码 附件列表: commons-fileupload-1.0.zip commons-fileupload-1.1.1.zip commons-fileupload-1.1.zip commons-fileupload-1.2.1-bin.zip commons-...
commons-fileupload-1.2.2commons-fileupload-1.2.2commons-fileupload-1.2.2commons-fileupload-1.2.2commons-fileupload-1.2.2commons-fileupload-1.2.2commons-fileupload-1.2.2commons-fileupload-1.2.2commons-...
java+servlet+commons-io-2.4.jar+commons-fileupload-1.3.jar实现文件的上传与下载
commons-fileupload-1.3.3.jar和commons-io-2.6.jar最新版本
commons-fileupload-1.3.1.jar
commons-fileupload-1.3.2jar包和commons-io-2.5jar包,可以到http://commons.apache.org里面下载最新版本。
commons-fileupload-1.4.jar
commons-fileupload-1.3.jar和commons-io-1.2.jar
commons-fileupload-1.3.2.jar和commons-io-2.5.jar
commons-fileupload和commons-io实现的上传,并通过ajax实现(进度条)
commons-fileupload-1.3.2.jar包和commons-io-2.5.jar包,用户jsp中上传文件到服务器
利用servlet实现的commons-fileupload的实例。也就是文件上传实例。
赠送jar包:commons-fileupload-1.3.3.jar; 赠送原API文档:commons-fileupload-1.3.3-javadoc.jar; 赠送源代码:commons-fileupload-1.3.3-sources.jar; 赠送Maven依赖信息文件:commons-fileupload-1.3.3.pom;...
明明只是几个jar包,其他资源真坑爹,可惜不能设为0资源分! commons-fileupload-1.3.3.jar commons-io-2.5.jar 利用这两个jia包完成资源上传功能
commons-fileupload-1.2.2.jar是一款可以实现文件上传功能的jar依赖包,一般进行应用开发的朋友会用到这个开发包,下载后放到应用程序的WEB-INF\lib下就可以正常使用了,有从事web开发的朋友不要错过。