- 浏览: 1597422 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
掌控上传进度的AJAX Upload
作者:cleverpig
AJAX——最酷的“冲浪板”
动机:
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}:
/** * 将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的属性}:
//上传总量 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}:
/** * 更新状态 * @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方法用于处理文件上传请求}:
/** * 处理文件上传 * @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<items.size();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<items.size();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方法用于处理对文件上传状态的轮询请求}:
/** * 回应上传状态查询 * @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方法用于处理取消文件上传的请求}:
/** * 处理取消文件上传 * @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类代码}:
//类工具 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类代码}:
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<objDomTree.childNodes.length; 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'))); } } else if (node.nodeType == funcHolder.TEXT_NODE){ if (funcHolder.isDebug){ //alert('TEXT_NODE'); } } else if (node.nodeType == funcHolder.CDATA_SECTION_NODE){ if (funcHolder.isDebug){ //alert('CDATA_SECTION_NODE'); } } } return obj; }, /** * 获得dom节点的text */ getNodeText:function (node) { var funcHolder=arguments.callee.$; // is this a text or CDATA node? if (node.nodeType == funcHolder.TEXT_NODE || node.nodeType == funcHolder.CDATA_SECTION_NODE) { return node.data; } var i; var returnValue = []; for (i = 0; i < node.childNodes.length; i++) { //采用递归算法 returnValue.push(funcHolder.getNodeText(node.childNodes[i])); } return returnValue.join(''); } }
{AjaxWrapper类的主要方法putRequest和callBackHandler}:
/** * 以get的方式向server发送request * @param url * @param params * @param callBackFunction 发送成功后回调的函数或者函数名 */ putRequest:function(url,params,callBackFunction){ var funcHolder=arguments.callee.$; var xmlHttp = new Ajax.Request(url, { method: 'get', parameters: params, requestHeaders:['my-header-encoding','utf-8'], onFailure: function(){ alert('对不起,网络通讯失败,请重新刷新!'); }, onSuccess: function(transport){ }, onComplete: function(transport){ funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]); } }); }, /** * 远程调用的回调处理 * @param transport xmlhttp的transport * @param callBackFunction 回调时call的方法,可以是函数也可以是函数名 */ callBackHandler:function(transport,callBackFunction){ var funcHolder=arguments.callee.$; if(transport.status!=200){ alert("获得回应失败,请求状态:"+transport.status); } else{ funcHolder.xml_source=transport.responseText; if (funcHolder.debug_flag) alert('call callback function'); if (typeof(callBackFunction)=='function'){ if (funcHolder.debug_flag){ alert('invoke callbackFunc'); } callBackFunction(transport.responseText); } else{ if (funcHolder.debug_flag){ alert('evalFunc callbackFunc'); } new execute().evalFunc(callBackFunction,transport.responseText); } if (funcHolder.debug_flag) alert('end callback function'); } }
{页面中主要的JavaScript方法:refreshUploadStatus和startProcess/cancelProcess}:
//刷新上传状态 function refreshUploadStatus(){ var ajaxW = new AjaxWrapper(false); ajaxW.putRequest( './uploadStatus.action', 'uploadStatus=', function(responseText){ var deserialor=new XMLDomForAjax(false); var uploadInfo=deserialor.deserializedBeanFromXML(responseText); var progressPercent = Math.ceil( (uploadInfo.readTotalSize) / uploadInfo.uploadTotalSize * 100); $('progressBarText').innerHTML = ' 上传处理进度: '+progressPercent+'% ['+ (uploadInfo.readTotalSize)+'/'+uploadInfo.uploadTotalSize + ' bytes]'+ ' 正在处理第'+uploadInfo.currentUploadFileNum+'个文件'+ ' 耗时: '+(uploadInfo.processRunningTime-uploadInfo.processStartTime)+' ms'; $('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.status; $('totalProgressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px'; } ); } //上传处理 function startProgress(){ Element.show('progressBar'); $('progressBarText').innerHTML = ' 上传处理进度: 0%'; $('progressStatusText').innerHTML=' 反馈状态:'; $('uploadButton').disabled = true; var periodicalExe=new PeriodicalExecuter(refreshUploadStatus,2); return true; } //取消上传处理 function cancelProgress(){ $('cancelUploadButton').disabled = true; var ajaxW = new AjaxWrapper(false); ajaxW.putRequest( './uploadStatus.action', 'cancelUpload=true', //因为form的提交,这可能不会执行 function(responseText){ var deserialor=new XMLDomForAjax(false); var uploadInfo=deserialor.deserializedBeanFromXML(responseText); $('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.status; if (msgInfo.cancel=='true'){ alert('删除成功!'); window.location.reload(); }; } ); }
运行界面:
起始页面
上传进行中…
上传完成后的文件列表
用户取消上传后显示的页面
上传过程中出错(上传文件过大)页面
源代码下载:
相关链接:
AJAX Upload progress monitor for Commons-FileUpload Example
Apache Common FileUpload组件
Prototype官方网站
IBM的AJAX SlideShow应用
解开JavaScript生命的达芬奇密码
Prototype.AjaxRequest的调用堆栈重写问题
感谢阅读此文
原文
永久链接
及源代码下载
地址
:
http://www.matrix.org.cn/resource/article/2007-01-08/09db6d69-9ec6-11db-ab77-2bbe780ebfbf.html
发表评论
-
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 677用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 921<td align="center" ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 712解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
Javascript跨域访问解决方案
2009-08-11 20:11 620由于安全方面的考虑,Javascript被限制了跨域访问的能力 ... -
不唐突的JavaScript的七条准则(转载)
2009-08-12 13:18 609经过多年的开发、教学 ... -
浅谈Javascript中的事件流和事件绑定
2009-08-13 16:31 756事件流 浏览器中的事 ... -
JavaScript继承详解(二)
2009-08-17 17:04 596转自:http://www.cnblogs.com/sansh ... -
JavaScript继承详解(一)
2009-08-17 17:04 671转自:http://www.cnblogs.com/sansh ... -
javascript实用技巧--数组.
2009-08-17 17:08 633数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来,免得 ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 564尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
常见的JavaScript错误
2009-08-17 17:19 709作者: Richardy, 出处:IT ... -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
2009-08-17 17:19 633网页可见区域宽:document.body.clientWid ... -
Javascript的Defer属性
2009-08-17 17:48 673Script中的Defer属性 ... -
最佳的"addEvent"是怎样诞生的
2009-08-18 13:47 616IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
值得推荐的事件捕获函数AddEvent()
2009-08-18 13:56 7421, 下面是JQuery之父推荐的添加移除事件方法。 ... -
随滚动条移动的层
2009-08-20 15:55 706<!DOCTYPE html PUBLIC &qu ... -
javascript 获取滚动条高度
2009-08-20 16:02 762/******************** * 取窗口滚动 ... -
如何去掉ie里面的关闭按钮,和屏蔽ALT+F4 (转载)
2009-09-01 17:46 758去掉关闭按钮可以使用无边框窗口设计,不过IE6中已经不支持了。 ... -
(window.onunload)只有点击浏览器右上角关闭按钮才执行
2009-09-01 18:31 831<html> <head> &l ... -
带关闭按钮的页面漂浮的代码(IE/FF)
2009-09-01 18:34 622带关闭按钮的页面漂浮的代码,兼容火狐和IE,只需要把Javas ...
相关推荐
原文地址 http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example/ 博文链接:https://congjl2002.iteye.com/blog/209925
NULL 博文链接:https://dolphin-ygj.iteye.com/blog/493621
ajaxupload.js ,ajax上传,具体用法可以自己查找教程。 ajaxupload.js ,ajax上传,具体用法可以自己查找教程。
利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...
ajaxUpload.ajaxUpload.ajaxUpload.
AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传
ajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_upload
ajaxupload.js,附demo例子 ajaxupload.js,附demo例子 ajaxupload.js,附demo例子 ajaxupload.js,附demo例子 ajaxupload.js,附demo例子
随着WEB技术的发展,用户体验成为衡量网站成功与否的关键,今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子,其中使用到了Jquery插件Ajaxupload,其可以实现单个文件和多文件上传功能。
ajaxupload.3.6.js 上传插件
ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说...
很多时候需要上传附件到... 在使用Ajax进行附件上传进度查询的时候也想过,直接使用Ajax进行附件上传,在实现过程中发现问题比较多,所以就使用了变通的方式:使用标准的附件上传方式,结合Ajax进行上传的进度检查
ajaxupload,c#上传,jquer上传,按钮上传,jquery,上传,ajaxupload单个按钮实现图片上传,不用file上传
AjaxUpload.js可以实现在Web应用系统开发中,文件上传和下载功能.使用方法参考: https://blog.csdn.net/liangmengbk/article/details/89333350
以下是本人实现ajax上传图片时参考的文章,希望能对大家有帮助。
ajaxupload上传ajaxupload上传ajaxupload上传