- 浏览: 1197917 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (361)
- java综合 (33)
- 项目管理 (10)
- 工作流 (6)
- spring (11)
- hibenate (17)
- struts (0)
- javascript,html,css,ajax,jquery (11)
- IDE (9)
- 生活 (0)
- 工作 (0)
- 杂记 (1)
- 数据库 (96)
- 服务器 (5)
- 可视编辑 (0)
- freemarker (6)
- 操作系统 windows (13)
- web页面 (6)
- jms (15)
- 调优 (4)
- 测试和bug管理 (2)
- 原理 (1)
- 項目-atf (17)
- 安全 (3)
- xml (4)
- 操作系统 liunx (21)
- 网络 (22)
- office (11)
- 设计 (2)
- 软件 (1)
- 数据库 mysql (6)
- 胖客户端-flex (1)
- 正则 (9)
- oracle- liunx (3)
- sql2000 (2)
- 模式 (1)
- 虚拟机 (2)
- jstl (2)
- 版本控制 打包工具 (0)
- AOP (1)
- demo (1)
- 小软件 (2)
- 感恩 (1)
- iphone 4 (1)
- 反欺诈业务经验整理 (0)
最新评论
-
sea0108:
mark
java内存模型 -
XingShiYiShi:
方便把:testPNR();具体实现发出来吗?谢谢
用正则表达式解析 航信的电子客票和pnr报文 -
wh359126613:
如果js和webservice不在同一个服务器上,有跨域问题如 ...
使用javascript调用webservice示例 -
雨飛雁舞:
...
oracle 动态性能(V$)视图 -
ouyang1224:
好东西
oracle 动态性能(V$)视图
掌控上传进度的AJAX Upload
作者:cleverpig
AJAX——最酷的“冲浪板”
原文永久链接及源代码下载地址:
http://www.matrix.org.cn/resource/article/2007-01-08/09db6d69-9ec6-11db-ab77-2bbe780ebfbf.html
动机:
2006年底Google了一下AJAX Upload实现,结果没有发现很完整的Java实现。硕果仅存的就是TELIO公司的Pierre-Alexandre发表的《AJAX Upload progress monitor for Commons-FileUpload Example》文中提供的ajax-upload-1.0.war。
虽然上文中完成Upload工作的是Apache的Common-FileUpload组件,但在其代码中所使用的FileUpload1.1版本并没有1.2版本所提供的上传处理Listener功能,这就对检测文件上传情况造成了困难。我想正是这个原因致使Pierre-Alexandre使用了DWR+MonitoredDiskFileItem、MonitoredDiskFileItemFactory类(分别继承DiskFileItem、DiskFileItemFactory) 的方式:前者负责在web客户端进行Remote Call;后者在进行文件数据读取时统计数据总量、读取数据量、处理文件总数,并保存于Session中,以供web客户端通过DWR远程调用 UploadMonitor类的getUploadInfo方法进行轮询(Poll)。
从本人观点出发,Pierre-Alexandre实现的不足之处:
1.没有用户取消上传功能;
2.完全的DWR实现,没有使用Prototype,对于不会使用DWR的开发者来讲有一定的知识局限性,而且由于DWR的个性而造成不便将此实现集成到项目中。
Prototype+Servlet的实现:
Prototype+Servlet的Example
所以出于研究Prototype之目的,本人经过仔细思考,尝试实现了一个Prototype+Servlet的简单Example。其工作流程很简单:
1.在Form提交上传文件Field的同时,使用AJAX周期性地从Servlet轮询上传状态信息;
2.然后,根据此信息更新进度条和相关文字,及时反映文件传输状态;
3.如果用户取消上传操作,则进行相应的现场清理工作:删除已经上传的文件,在Form提交页面中显示相关信息;
4.如果上传完毕,在Form提交页面中显示已经上传的文件内容(或链接),也可以与一些AJAX SlideShow应用结合在一起。
服务器端代码:
Bean序列化/反序列化工作:XmlUnSerializer这个类虽然不能够通吃任何模样的Bean,但应付一般的Bean、具有Collection类型属性的Bean和Bean List来讲还是够用的。
{XmlUnSerializer类的核心方法serializeBean和serializeBeanList}:
java 代码
- /**
- * 将bean系列化为UTF-8编码的xml
- * @param beanObj
- * @return
- * @throws IOException
- */
- public static String serializeBean(Object beanObj) throws IOException{
- …
- }
- /**
- * 将bean列表序列化为UTF-8编码的xml
- * @param beanObj
- * @return
- * @throws IOException
- */
- public static String serializeBeanList(Object beanListObj) throws IOException{
- …
- }
文件上传状态Bean:使 用FileUploadStatus这个类记录文件上传状态,并将其作为服务器端与web客户端之间通信的媒介物:通过对这个类对象进行XML序列化作为 服务器回应发送给web客户端,web客户端使用JavaScript对其进行反序列化处理获得JavaScript版本的文件上传状态对象。
{FileUploadStatus的属性}:
java 代码
- //上传总量
- private long uploadTotalSize=0;
- //读取上传总量
- private long readTotalSize=0;
- //当前上传文件号
- private int currentUploadFileNum=0;
- //成功读取上传文件数
- private int successUploadFileCount=0;
- //状态
- private String status="";
- //处理起始时间
- private long processStartTime=0l;
- //处理终止时间
- private long processEndTime=0l;
- //处理执行时间
- private long processRunningTime=0l;
- //上传文件URL列表
- private List uploadFileUrlList=new ArrayList();
- //取消上传
- private boolean cancel=false;
- //上传base目录
- private String baseDir="";
文件上传状态监视工作:使用Common-FileUpload 1.2版本(20070103)。此版本与1.1版的区别在于提供了能够监视文件上传情况的ProcessListener接口,使开发者通过FileUploadBase类对象的setProcessListener方法植入自己的Listener,而且实现这个Listener很简单。
{FileUploadListener主要方法update}:
java 代码
- /**
- * 更新状态
- * @param pBytesRead 读取字节总数
- * @param pContentLength 数据总长度
- * @param pItems 当前正在被读取的field号
- */
- public void update(long pBytesRead, long pContentLength, int pItems){
- FileUploadStatus fuploadStatus=BackGroundService.takeOutFileUploadStatusBean(this.session);
- logger.debug("当前正在处理第" + pItems+"个文件");
- fuploadStatus.setUploadTotalSize(pContentLength);
- //读取完成
- if (pContentLength == -1) {
- logger.debug("读取完成:读取了 " + pBytesRead + " bytes.");
- fuploadStatus.setStatus("完成对" + pItems+"个文件的读取:读取了 " + pBytesRead + " bytes.");
- fuploadStatus.setReadTotalSize(pBytesRead);
- fuploadStatus.setSuccessUploadFileCount(pItems);
- fuploadStatus.setProcessEndTime(System.currentTimeMillis());
- fuploadStatus.setProcessRunningTime(fuploadStatus.getProcessEndTime());
- //读取中
- } else {
- logger.debug("读取进行中:已经读取了 " + pBytesRead + " / " + pContentLength+ " bytes.");
- fuploadStatus.setStatus("当前正在处理第" + pItems+"个文件:已经读取了 " + pBytesRead + " / " + pContentLength+ " bytes.");
- fuploadStatus.setReadTotalSize(pBytesRead);
- fuploadStatus.setCurrentUploadFileNum(pItems);
- fuploadStatus.setProcessRunningTime(System.currentTimeMillis());
- }
- BackGroundService.storeFileUploadStatusBean(this.session,fuploadStatus);
- }
很清楚,我也把FileUploadStatus这个Bean存取于Session中。
Servlet实现:BackGroundService 这个Servlet类负责接收Form Post数据、回应状态轮询请求、处理取消文件上传的请求。尽管可以把这些功能相互分离开来(比如构造一个FileUploadManager类),但出 于简单明了、便于阅读之目的,还是将它们放到Servlet中,只是由不同的方法进行分割。
{BackGroundService中的processFileUpload方法用于处理文件上传请求}:
java 代码
- /**
- * 处理文件上传
- * @param request
- * @param response
- * @throws IOException
- * @throws ServletException
- */
- private void processFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
- DiskFileItemFactory factory = new DiskFileItemFactory();
- //设置内存阀值,超过后写入临时文件
- factory.setSizeThreshold(10240000);
- //设置临时文件存储位置
- factory.setRepository(new File(request.getRealPath("/upload/temp")));
- ServletFileUpload upload = new ServletFileUpload(factory);
- //设置单个文件的最大上传size
- upload.setFileSizeMax(10240000);
- //设置整个request的最大size
- upload.setSizeMax(10240000);
- upload.setProgressListener(new FileUploadListener(request.getSession()));
- //保存初始化后的FileUploadStatus Bean
- storeFileUploadStatusBean(request.getSession(),initFileUploadStatusBean(request));
- String forwardURL="";
- try {
- List items = upload.parseRequest(request);
- //获得返回url
- for(int i=0;i
- FileItem item=(FileItem)items.get(i);
- if (item.isFormField()){
- logger.debug("form Field["+item.getFieldName()+"]="+item.getString());
- forwardURL=item.getString();
- break;
- }
- }
- //处理文件上传
- for(int i=0;i
- FileItem item=(FileItem)items.get(i);
- //取消上传
- if (takeOutFileUploadStatusBean(request.getSession()).getCancel()){
- deleteUploadedFile(request);
- break;
- }
- //保存文件
- else if (!item.isFormField() && item.getName().length()>0){
- String fileName=takeOutFileName(item.getName());
- logger.debug("处理文件["+fileName+"]:保存路径为"
- +request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
- File uploadedFile = new File(request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
- item.write(uploadedFile);
- //更新上传文件列表
- FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());
- fUploadStatus.getUploadFileUrlList().add(fileName);
- storeFileUploadStatusBean(request.getSession(),fUploadStatus);
- Thread.sleep(500);
- }
- }
- } catch (FileUploadException e) {
- logger.error("上传文件时发生错误:"+e.getMessage());
- e.printStackTrace();
- uploadExceptionHandle(request,"上传文件时发生错误:"+e.getMessage());
- } catch (Exception e) {
- // TODO Auto-generated catch block
- logger.error("保存上传文件时发生错误:"+e.getMessage());
- e.printStackTrace();
- uploadExceptionHandle(request,"保存上传文件时发生错误:"+e.getMessage());
- }
- if (forwardURL.length()==0){
- forwardURL=DEFAULT_UPLOAD_FAILURE_URL;
- }
- request.getRequestDispatcher(forwardURL).forward(request,response);
- }
{BackGroundService中的responseFileUploadStatusPoll方法用于处理对文件上传状态的轮询请求}:
java 代码
- /**
- * 回应上传状态查询
- * @param request
- * @param response
- * @throws IOException
- */
- private void responseFileUploadStatusPoll(HttpServletRequest request,HttpServletResponse response) throws IOException{
- response.setContentType("text/xml");
- response.setCharacterEncoding("UTF-8");
- response.setHeader("Cache-Control", "no-cache");
- logger.debug("发送上传状态回应");
- response.getWriter().write(XmlUnSerializer.serializeBean(
- request.getSession().getAttribute(UPLOAD_STATUS)));
- }
{BackGroundService中的processCancelFileUpload方法用于处理取消文件上传的请求}:
java 代码
- /**
- * 处理取消文件上传
- * @param request
- * @param response
- * @throws IOException
- */
- private void processCancelFileUpload(HttpServletRequest request,HttpServletResponse response) throws IOException{
- FileUploadStatus fUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);
- fUploadStatus.setCancel(true);
- request.getSession().setAttribute(UPLOAD_STATUS, fUploadStatus);
- responseFileUploadStatusPoll(request,response);
- }
Web客户端代码:
Prototype给开发者更多的自由选择
web客户端使用了基于Prototype的AjaxWrapper类和XMLDomForAjax类,前者实现了对Ajax.Request功能的封装,而后者实现了对来自服务器的XML Response的反序列化(反序列化为JavaScript对象)。
为了避免在AjaxWrapper的回调方法中发生this被重写的问题,我使用了ClassUtils类给任何类的每个方法注册一个对类对象自身引用,详见《解开JavaScript生命的达芬奇密码》和《Prototype.AjaxRequest的调用堆栈重写问题》:
{ClassUtils类代码}:
js 代码
- //类工具
- var ClassUtils=Class.create();
- ClassUtils.prototype={
- _ClassUtilsName:'ClassUtils',
- initialize:function(){
- },
- /**
- * 给类的每个方法注册一个对类对象的自我引用
- * @param reference 对类对象的引用
- */
- registerFuncSelfLink:function(reference){
- for (var n in reference) {
- var item = reference[n];
- if (item instanceof Function)
- item.$ = reference;
- }
- }
- }
{将XML反序列化为JavaScript对象的XMLDomForAjax类代码}:
js 代码
- var XMLDomForAjax=Class.create();
- XMLDomForAjax.prototype={
- isDebug:false,
- //dom节点类型常量
- ELEMENT_NODE:1,
- ATTRIBUTE_NODE:2,
- TEXT_NODE:3,
- CDATA_SECTION_NODE:4,
- ENTITY_REFERENCE_NODE:5,
- ENTITY_NODE:6,
- PROCESSING_INSTRUCTION_NODE:7,
- COMMENT_NODE:8,
- DOCUMENT_NODE:9,
- DOCUMENT_TYPE_NODE:10,
- DOCUMENT_FRAGMENT_NODE:11,
- NOTATION_NODE:12,
- initialize:function(isDebug){
- new ClassUtils().registerFuncSelfLink(this);
- this.isDebug=isDebug;
- },
- /**
- * 建立跨平台的dom解析器
- * @param xml xml字符串
- * @return dom解析器
- */
- createDomParser:function(xml){
- // code for IE
- if (window.ActiveXObject){
- var doc=new ActiveXObject("Microsoft.XMLDOM");
- doc.async="false";
- doc.loadXML(xml);
- }
- // code for Mozilla, Firefox, Opera, etc.
- else{
- var parser=new DOMParser();
- var doc=parser.parseFromString(xml,"text/xml");
- }
- return doc;
- },
- /**
- * 反向序列化xml到javascript Bean
- * @param xml xml字符串
- * @return javascript Bean
- */
- deserializedBeanFromXML:function (xml){
- var funcHolder=arguments.callee.$;
- var doc=funcHolder.createDomParser(xml);
- // documentElement总表示文档的root
- var objDomTree=doc.documentElement;
- var obj=new Object();
- for (var i=0; i
- //获得节点
- var node=objDomTree.childNodes[i];
- //取出其中的field元素进行处理
- if ((node.nodeType==funcHolder.ELEMENT_NODE) && (node.tagName == 'field')) {
- var nodeText=funcHolder.getNodeText(node);
- if (funcHolder.isDebug){
- alert(node.getAttribute('name')+' type:'+node.getAttribute('type')+' text:'+nodeText);
- }
- var objFieldValue=null;
- //如果为列表
- if (node.getAttribute('type')=='java.util.List'){
- if (objFieldValue && typeof(objFieldValue)=='Array'){
- if (nodeText.length>0){
- objFieldValue[objFieldValue.length]=nodeText;
- }
- }
- else{
- objFieldValue=new Array();
- }
- }
- else if (node.getAttribute('type')=='long'
- || node.getAttribute('type')=='java.lang.Long'
- || node.getAttribute('type')=='int'
- || node.getAttribute('type')=='java.lang.Integer'){
- objFieldValue=parseInt(nodeText);
- }
- else if (node.getAttribute('type')=='double'
- || node.getAttribute('type')=='float'
- || node.getAttribute('type')=='java.lang.Double'
- || node.getAttribute('type')=='java.lang.Float'){
- objFieldValue=parseFloat(nodeText);
- }
- else if (node.getAttribute('type')=='java.lang.String'){
- objFieldValue=nodeText;
- }
- else{
- objFieldValue=nodeText;
- }
- //赋值给对象
- obj[node.getAttribute('name')]=objFieldValue;
- if (funcHolder.isDebug){
- alert(eval('obj.'+node.getAttribute('name'))); </sp>
- AjaxFileUpload_u2.war (1.6 MB)
- 下载次数: 40
发表评论
-
主题:整理的DWR学习笔记(转)
2010-06-11 18:29 0DWR是什么,懒得说啦,上网百度一下吧, 学校差不多断网了,借 ... -
ajax jsp 无刷新上传文件
2009-10-18 18:08 2508是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递 ... -
JSTL <fmt:formatDate/>
2009-02-26 09:38 2806关键字: fmt:formatdate, jstl fmt: ... -
Jakarta Commons HttpClient 学习笔记
2009-02-19 14:19 3239Jakarta Commons HttpClie ... -
post和get方法的区别总结
2009-02-19 11:56 3907post和get方法的区别总结 简 ... -
SiteMesh:一个优于Apache Tiles的Web页面布局、装饰框架
2009-02-17 10:06 2406SiteMesh:一个优于Apache ...
相关推荐
原文地址 http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example/ 博文链接:https://congjl2002.iteye.com/blog/209925
AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`ajaxupload.js`是实现这一...
6. 处理反馈:一旦接收到服务器的响应,AjaxUpload会根据反馈信息更新页面,如显示上传进度、成功或失败的消息等。 **二、AjaxUpload的关键技术** 1. XMLHttpRequest:AjaxUpload依赖于XMLHttpRequest对象,用于...
2. **事件处理**:在上传过程中,AjaxUpload.js 提供了一系列的事件,如“选择文件”(onSelect)、“开始上传”(onStart)、“上传进度”(onProgress)、“上传成功”(onSuccess)和“上传失败”(onError)。...
AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,了解如何集成到项目中,并掌握其...
ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说...
利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...
AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...
Base64和AjaxUpload上传文件代码实例 Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式,它们都可以实现文件上传到服务器端,但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式...
标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...
在Ajax Upload过程中,需处理一系列事件,如文件选择事件、上传开始事件、上传进度事件和上传完成事件。这些事件可以用来显示上传进度,提供反馈,或者处理错误。 6. **安全考虑**: 文件上传时要考虑安全性问题...
当用户选择文件后,而不是立即提交整个表单,AjaxUpload会触发一个后台上传过程,这个过程通常伴随着进度指示和错误处理机制。在服务器端,接收并处理文件后,会将结果通过JSON、XML或其他格式响应给客户端,然后...
AjaxUpload是基于Ajax技术的一种文件上传方式,它允许用户在不刷新整个页面的情况下上传文件,同时可以显示上传进度和错误提示,使得文件上传操作更加友好和高效。 **一、AjaxUpload工作原理** AjaxUpload的基本...
在使用`ajaxupload.js`时,你需要配置相关的参数,如URL(文件上传的目标地址)、数据类型(通常为'binary'或'json')以及回调函数,这些回调函数可以处理上传开始、进度更新和成功/失败的情况。 而`ajaxfileupload...
- **多文件上传**:虽然AjaxUpload默认支持单文件上传,但可以通过修改插件代码或使用其他库(如Dropzone.js)实现多文件上传。 - **文件类型限制**:在beforeSubmit函数中,可以通过检查文件扩展名来限制上传的文件...
7. **ajax_uploader**:这可能是一个JavaScript文件,包含前端的Ajax上传实现,负责与服务器(ajaxupload.php)进行通信,提供用户界面反馈,如上传进度、错误提示等。 综合以上分析,这个源码包为PHP网站提供了一...
**AjaxUpload:强大的异步文件上传插件** AjaxUpload是一款基于JavaScript和Ajax技术的文件上传插件,它允许用户在不刷新页面的情况下实现文件的上传,极大地提升了用户体验。这款插件以其简洁的API和高度的可定制...