`

DWR + FileUpload 多文件上传实例, 进度条 百分比 上传速度 文件大小...

    博客分类:
  • AJAX
阅读更多

WAR 包已更新, 修复中文乱码问题, 并采用了 Reverse Ajax技术

 

功能: 文件上传

特点: 动态显示进度, 百分比, 文件名, 文件长度, 上传速度... 剩下的自己看吧

主要技术: DWR, Apache commons FileUpload

原理: FileUpload实现上传功能, UploadListener 监听上传进度, DWR push (Reverse Ajax) 进度信息并更新页面, 实现无刷新多文件上传

运行环境: Tomcat 6, WAS 6 测试通过

 

WAR下载 见附件

 

 

顺便截个图:

 FileUpload demo

分享到:
评论
50 楼 renyuchuan 2012-04-23  
dyfh 写道
解决了,再次感谢楼主的分享

请问怎么解决的。。我看了半天没看懂呢。谢谢了
49 楼 dyfh 2011-12-12  
解决了,再次感谢楼主的分享
48 楼 dyfh 2011-12-12  
刚才我楼下讲得有些不对,不是FileItemIterator fIter = upload.getItemIterator(request);处出错,而是在UploadListener类里的下面代码处出错
if(pBytesRead + 2000 > pContentLength){
pi.setBytesRead(pContentLength);
sp.addFunctionCall("updateProgress", pi);
return;
}

如果注释掉sp.addFunctionCall("updateProgress", pi);,则小文件也可能单个正常上传,否则就会出错,博主有办法解决吗?
47 楼 dyfh 2011-12-12  
多谢楼主分享,但我还是有个问题。在下载部署文件后,发现如果只上传一个文件,且文件过小时,会报错。
-->> FileUploadServlet, cancelled or interrupted!
java.lang.NullPointerException

经查是servlet下面这句出错:
FileItemIterator fIter = upload.getItemIterator(request);

只传一个文件且文件小于4K时,必出。如果多文件上传或文件较大,就没有问题。

请问这是什么原因?如何解决?
46 楼 bruce.lu 2011-11-06  
yangkai 写道
好个屁啊。。你是学JAVA的吗?
源代码都不给个。。给个.war包.


不准随地大小.., .war里面明明有源码的。
45 楼 萧十一狼 2009-04-12  
<p>上传的文件保存在了Tomcat 5.5\temp目录下~&nbsp; <br /><span style="color: #ff0000;">&nbsp;File file = new File(this.getFileName(item.getName())); //这个路径Windows是: C:\Documents and Settings\Administrator\Local Settings\Temp</span><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (file.exists()) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file.delete();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OutputStream out = new FileOutputStream(file);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bStream.writeTo(out);</p>
<p><br />&nbsp;怎么设置保存路径在我想要的地方, 我对操作流不太懂。</p>
44 楼 doltter 2009-02-16  
是否有源代码啊
43 楼 pc_funning 2009-02-11  
bruce.lu 写道

icewubin 写道

bruce.lu 写道

icewubin 写道
... 是这样的,HTTP长连接本质上相当于一个socket连接,如果采用HTTP长连接的方式最多就多占用一个socket连接,性能应该是可以接受的吧。Icewubin 兄弟说的也不无道理。 我们在多用户并发这个极端条件下采用HTTP长连接, N个用户就会占用N个socket连接。 Application Server 会不会 connection starving? 用户在上传的时候本身就是一个HTTP长连接,如果说为了界面友好,多占一个HTTP长连接而已。 多消耗一倍的资源而已,只是连接数资源,带宽占用很小。 就是一个简单的取舍问题,对吧。 先不管这个方案真的在极端情况下有多烂,但是至少是可用的,如果访问量真的可喜的达到极端情况了,那就可以考虑其他方案应对了。 如果用你现在的方案,很快就会达到极端情况,也就是说,不同的方案,并发数负载不一样。 Hi, Icewubin, 能否详细给出你能想到的最好的方案? 谢谢!

。。。
42 楼 yangkai 2009-02-07  
好个屁啊。。你是学JAVA的吗?
源代码都不给个。。给个.war包.

41 楼 victor_mamj 2008-11-19  
多用户同时上传的情况下怎么解决?
40 楼 zhangbosix 2008-11-09  
这个我在tomcat下访问没有问题,可是我把apache和tomcat整和之后再访问就问题了,弹出个 javascript的框"Not Found"!希望你看一下,我等待!
39 楼 bruce.lu 2008-10-24  
WAR 包已更新, 修复中文乱码问题, 并采用了 Reverse Ajax 技术
38 楼 sun0218 2008-10-24  
好东东, 学习学习
37 楼 bruce.lu 2008-10-23  
coolstar648 写道
楼主,问你个问题。
你这个包里用到的servlet是哪个版本的?我用了我的servlet架包后报错。

建议用tomcat6\lib\servlet-api.jar
这个可以的, 因为用这个测试过。
36 楼 bruce.lu 2008-10-23  
kaki 写道
Ext里面有一个现成的,做的很好楼主可以看看。

很久前见过Ext的上传组件, 就是个图片在那乱闪, 好像不能百分比显示。 有空再看看, 多谢了
35 楼 bruce.lu 2008-10-23  
icewubin 写道

...
这无非就是做选择题:

1.绝大多数的选择就是,像EXT的例子那样,做一个假的进度条,简单高效。(目前我们公司用的就是这种,背景是客户上传的都是小文件,不超过30K,即使进度条是假的,用户也发觉不了)

2.再加一个长连接,用来实时推送当前的真实进度。

3.如果第二种方式有技术难度或者多一个长连接也不能接受的话,建议直接使用Flex的文件上传组件,功能强大的非常多,还不用自己开发。

4.局域网使用,并发数不是很高的情况下,用楼主的代码也没有太大的问题。

都是出于开发成本的考虑,做的太简单不能应用到互联网上,做的太复杂,又不可能做的有Flex组件那样强,需要一个折中,不就是做选择题么。

1. 嗯, 假的也是个办法, 但碰到客户要求看到百分比的...
2. 这办法看来最可行, 但长连接在DWR里也是有几种选择的, 我个人觉得首先让Reverse Ajax enabled, 然后 A:如果觉得长连接可以接受, 用Full Streaming Mode 或 Early Closing Mode; B: 如果干脆不喜欢长连接, 用Polling Mode
3. Flex 需要客户端有flash player, 其实dojo新加的文件上传组件也是这样做的(也是我个人比较喜欢的),原理是javascript和flash交互, 这种方式还有个好处, 可以在客户端直接判断文件大小。 但对于brower端没有flash player的用户他就得安装。 不要笑, 我也知道flash player 在90%以上的browers里都安装了。注意:不是100%。 不知道你有没有碰到过那样的客户, 我碰到过: 他就需要seamless & smooth!
34 楼 bruce.lu 2008-10-23  
aaron2007 写道

呵呵很支持!但是测试了一些还有很多bug!因为对ext不熟悉,所以没有对程序进行修正不好意思!
1:传递中文的时候出现乱码。
2:有时候传递之后文件根本没有传递上去但是还有进度!

jstudio 写道

中文乱码问题。。。。。。

differsky 写道

楼主,在测试的时候有没有测试上传,有没有考虑上传文件或图片是中文命名,乱码问题,希望楼主改进一下......


不好意思, 最近在忙项目, 有段时间没上来了。 看到这么多哥们在关注, 心情不错, 谢谢哈!
1. 中文问题解决方案
ServletFileUpload upload = new ServletFileUpload();
upload.setHeaderEncoding("UTF-8");

2. Bug fix
刚好有点时间, 一会儿仔细看看。 Fix 后再重新上传 WAR 包

33 楼 bruce.lu 2008-10-23  
jacklan 写道

用DWR可以实现断点续传吗?

哥们, 这个俺没试过, 不过可以给一个关于断点续传的链接:
http://conkeyn.iteye.com/blog/239603
32 楼 bruce.lu 2008-10-23  
血之兽 写道

说的挺好的

说的好不好不重要, 也管不了别人怎么说。 但至少做了!
xzj127 写道

看了。。
      不好。。

重申下: 这只是个Demo, 目的是sharing和discussion。
BTW, 超喜欢 icewubin 的风格: 有问题, 有什么问题, 提出来, 大家一起探讨! 当然, 能像 icewubin 一样能给出解决方案就更好了!

31 楼 jacklan 2008-10-19  
用DWR可以实现断点续传吗?

相关推荐

    DWR+FileUpload上传

    综上所述,"DWR+FileUpload上传"涉及到的技术点主要包括: 1. DWR框架:用于实现实时、异步的前后端通信。 2. HTML5 File API:提供了文件操作和上传进度的支持。 3. 带进度条的实现:利用DWR的回调机制和HTML5的...

    FileUpload+DWR 多文件上传实例

    原理: FileUpload实现上传功能, UploadListener 监听上传进度, DWR push (Reverse Ajax) 进度信息并更新页面, 实现无刷新多文件上传 运行环境: Tomcat 5/6 测试通过 说明:累计上传文件不超过10M(可以更改...

    fileupload+dwr2+webwork2实现带进度条上传文件

    而FileUpload库可以处理多部分/表单数据,允许用户上传多个文件,并且不受大小限制。它支持流式和内存两种处理模式,可以根据需求选择合适的处理方式,以避免内存溢出问题。 2. **Direct Web Remoting (DWR)**:DWR...

    Dwr+进度条上传文件(支持多文件)

    标题 "Dwr+进度条上传文件(支持多文件)" 指的是使用Direct Web Remoting (DWR) 技术实现的文件上传功能,并且具备显示进度条以及支持同时上传多个文件的能力。DWR是一种在浏览器和服务器之间进行异步通信的...

    采用dwr+Ajax和struts开发文件上传进度条(网络文章)

    采用dwr+Ajax和struts开发文件上传进度条(网络文章)

    DWR+jquery2.x+easyUI1.3.x开发富客户端应用

    ### DWR+jquery2.x+easyUI1.3.x开发富客户端应用 #### 知识点一:技术栈概述 本篇文章将介绍一种基于DWR、jquery2.x以及easyUI1.3.x的技术栈来构建富客户端应用的方法。该技术栈还包括了Struts2.x、Spring3.x等...

    采用dwr+ajax和struts开发文件上传进度条

    ### 采用DWR+AJAX和Struts开发文件上传进度条 #### 一、概述 在Web应用开发中,文件上传是一项常见的功能需求。传统的文件上传方式无法提供良好的用户体验,尤其是对于大文件上传时,用户很难了解到上传进度,进而...

    DWR2.jar + DWR.xml + DWR2.0.dtd + Web.xml

    Direct Web Remoting (DWR) 是一个开源Java库,它允许Web应用程序在浏览器和服务器之间进行实时、双向通信,使得JavaScript可以直接调用Java方法,从而实现了富互联网应用(RIA)的功能。DWR2.0是DWR的一个版本,...

    DWR + Servlet 实现文件上传功能

    本文将深入探讨如何利用DWR与Servlet实现在Web应用程序中添加文件上传功能,并且特别关注如何实现进度条展示。 DWR是一种JavaScript库,它允许在浏览器和服务器之间进行双向通信,使得动态更新页面变得更加容易。...

    利用DWR实现文件上传进度条

    如果文件正在上传(`uploadInfo.inProgress` 为真),则禁用上传按钮和文件选择器,并根据已读取的字节数与总大小计算出进度百分比,更新进度条文本和宽度。如果上传完成,这两个元素的禁用状态将被解除。 `start...

    dwr教程+dwr.jar+util.js+engine.js

    首先,`dwr.jar` 文件是DWR的主要库文件,包含了所有必要的类和接口,使得Java对象能够在浏览器中被调用。它简化了AJAX(Asynchronous JavaScript and XML)应用的开发,通过动态生成JavaScript,将服务器端的Java...

    DWR3 文件上传显示进度条

    标题“DWR3 文件上传显示进度条”指的正是DWR3版本中如何实现在Web界面中展示文件上传的进度条,提供更好的用户体验。DWR3是DWR框架的一个迭代版本,增加了更多的功能和改进,使得与服务器的通信更加高效和流畅。 ...

    Strues2-Dwr 带进度条文件上传

    Struts2-DWR带进度条文件上传是一种在Web应用程序中实现大文件上传并显示实时进度条的技术组合。Struts2是一个流行的Java MVC框架,用于构建企业级Web应用,而DWR(Direct Web Remoting)是一个JavaScript库,允许在...

    ext+dwr+....实现时时聊天

    【标题】:“ext+dwr+...实现时时聊天” 在IT领域,实时聊天功能是许多Web应用程序的核心组成部分,尤其是在社交、协作或客户服务应用中。本文将深入探讨如何利用JSP(JavaServer Pages)和Direct Web Remoting ...

    DWR+Struts+spring+hibernate的订货系统

    DWR+Struts+spring+hibernate的订货系统,自己添加的dwr功能

    dwr实现无刷新带进度条多文件上传(java版)

    在本项目中,"dwr实现无刷新带进度条多文件上传(java版)",主要展示了如何利用DWR来创建一个用户友好的文件上传功能,该功能可以在上传过程中显示进度条,提升用户体验。 1. **DWR基础**:DWR允许JavaScript直接...

    dwr+hibernate+spring 集成 实例

    本实例探讨的是Direct Web Remoting (DWR)、Hibernate和Spring三大技术的集成应用。这三者都是Java世界中的明星组件,各自在不同领域发挥着重要作用。 DWR是一款开源的JavaScript库,它允许Web应用程序在客户端和...

    dwr和简单的文件上传

    在这个场景中,我们将讨论如何使用DWR来实现简单的文件上传功能。 文件上传是Web应用中常见的一种用户交互方式,通常涉及到前端的HTML表单、后端的处理逻辑以及可能的文件存储策略。DWR通过提供对Java方法的远程...

    dwr+spring+hibernate模板.zip

    - 整合DWR与Spring:DWR的配置可以通过Spring的Bean工厂来完成,这样可以利用Spring的依赖注入特性,方便地管理DWR的实例。同时,Spring的AOP可以用来实现DWR方法的安全性和事务管理。 - 整合Hibernate与Spring:...

    疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发(part01)

    《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年,作为Ajax领域最全面、实用的图书,一直深受读者的好评。全书主要分为三个...

Global site tag (gtag.js) - Google Analytics