`
心动音符
  • 浏览: 336915 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

掌控上传进度的AJAX Upload (一)

阅读更多
来eye很久了,一直都没有开博(比较懒)。最近发现很多人都在博客上记录自己学习的心得体会。我觉得这是件很有意义得事情。所以好事情、好现象就要学习、就要推广,大家一起来啊!

动机:
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版本的文件上传状态对象。
//上传总量       
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很简单
/*** 更新状态* @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);        
	}


分享到:
评论

相关推荐

    掌控上传进度的Ajax Upload

    原文地址 http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example/ 博文链接:https://congjl2002.iteye.com/blog/209925

    掌控上传进度的AJAX Upload

    NULL 博文链接:https://dolphin-ygj.iteye.com/blog/493621

    ajaxupload.js

    为确保更广泛的用户支持,可以考虑结合使用如jQuery或其它库,或者采用渐进增强的方式处理不支持Ajax上传的浏览器。 总结来说,AjaxUpload是一个方便的JavaScript库,它通过Ajax实现了无刷新的文件上传,改善了用户...

    jquery Ajaxupload应用

    AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,了解如何集成到项目中,并掌握其...

    AjaxUpload.rar 文件上传

    1. jQuery Form Plugin:一个jQuery插件,支持Ajax上传,包括文件上传。 2. Plupload:一个强大的多浏览器、多Runtimes的文件上传组件,支持Flash, Silverlight, Gears, BrowserPlus, HTML5。 3. Fine Uploader:...

    ajaxupload无刷新文件上传,支持多文件上传,使用很方便哦

    ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说...

    Jquery AjaxUpload实现文件上传实例 PHP版

    AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...

    ajaxUpload.

    许多JavaScript组件库如jQuery、jQuery UI、Vue.js等提供了方便的Ajax上传插件,简化了实现过程。例如,jQuery有`$.ajax()`和`$.fileUpload()`方法。 ```javascript $('input[type=file]').fileupload({ url: '/...

    ajaxupload华丽的图片上传

    利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...

    ajaxupload.js上传图片

    2. **事件处理**:在上传过程中,AjaxUpload.js 提供了一系列的事件,如“选择文件”(onSelect)、“开始上传”(onStart)、“上传进度”(onProgress)、“上传成功”(onSuccess)和“上传失败”(onError)。...

    Ajaxupload

    当用户选择文件后,而不是立即提交整个表单,AjaxUpload会触发一个后台上传过程,这个过程通常伴随着进度指示和错误处理机制。在服务器端,接收并处理文件后,会将结果通过JSON、XML或其他格式响应给客户端,然后...

    ajaxUpload示例

    AjaxUpload是基于Ajax技术的一种文件上传方式,它允许用户在不刷新整个页面的情况下上传文件,同时可以显示上传进度和错误提示,使得文件上传操作更加友好和高效。 **一、AjaxUpload工作原理** AjaxUpload的基本...

    jquery 插件ajaxupload 的简单应用

    AjaxUpload是一款基于jQuery的插件,它允许用户在无需刷新页面的情况下上传文件。这个插件极大地提升了用户体验,因为它能够实现在后台处理文件上传,同时还可以自定义各种反馈机制,如进度条、消息提示等。在网页...

    ajax_upload_ajaxupload_walkazj_源码

    7. **ajax_uploader**:这可能是一个JavaScript文件,包含前端的Ajax上传实现,负责与服务器(ajaxupload.php)进行通信,提供用户界面反馈,如上传进度、错误提示等。 综合以上分析,这个源码包为PHP网站提供了一...

    ajaxUpload(一个上传插件)

    AjaxUpload是一款基于JavaScript和Ajax技术的文件上传插件,它允许用户在不刷新页面的情况下实现文件的上传,极大地提升了用户体验。这款插件以其简洁的API和高度的可定制性,在Web开发领域中广受欢迎。以下是关于...

    Base64和AjaxUpload上传文件代码实例

    AjaxUpload上传文件是一种基于Ajax技术的上传方式,它可以实现文件的实时上传,提高用户体验。这种方式的优点是,上传文件的速度相对较快,且可以实时显示上传进度。但是,AjaxUpload上传文件也存在一些缺陷,例如...

    使用ajaxupload.js/ajaxfileupload.js实现文件上传

    它利用IFrame或者Flash来模拟Ajax上传,确保了较好的兼容性。同样,`ajaxfileupload.js`也提供了丰富的事件回调,如onStart、onComplete、onProgress等,让你能根据实际需求定制上传行为。使用此库时,你需要引入...

Global site tag (gtag.js) - Google Analytics