来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);
}
分享到:
相关推荐
原文地址 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
为确保更广泛的用户支持,可以考虑结合使用如jQuery或其它库,或者采用渐进增强的方式处理不支持Ajax上传的浏览器。 总结来说,AjaxUpload是一个方便的JavaScript库,它通过Ajax实现了无刷新的文件上传,改善了用户...
AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,了解如何集成到项目中,并掌握其...
1. jQuery Form Plugin:一个jQuery插件,支持Ajax上传,包括文件上传。 2. Plupload:一个强大的多浏览器、多Runtimes的文件上传组件,支持Flash, Silverlight, Gears, BrowserPlus, HTML5。 3. Fine Uploader:...
ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些功能独立出来,比如文件类型、单个文件或者多文件上传功能。总的来说...
AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...
许多JavaScript组件库如jQuery、jQuery UI、Vue.js等提供了方便的Ajax上传插件,简化了实现过程。例如,jQuery有`$.ajax()`和`$.fileUpload()`方法。 ```javascript $('input[type=file]').fileupload({ url: '/...
利用ajaxupload组件实现的图片上传 1、在部署该工程时,要在tomcat/webapps/对应的工程下建upload/good目录; 2、在该工程中,点击一次上传图片按钮,就执行一次后台操作,然后将图片的路径保存在一个input的隐藏域...
2. **事件处理**:在上传过程中,AjaxUpload.js 提供了一系列的事件,如“选择文件”(onSelect)、“开始上传”(onStart)、“上传进度”(onProgress)、“上传成功”(onSuccess)和“上传失败”(onError)。...
当用户选择文件后,而不是立即提交整个表单,AjaxUpload会触发一个后台上传过程,这个过程通常伴随着进度指示和错误处理机制。在服务器端,接收并处理文件后,会将结果通过JSON、XML或其他格式响应给客户端,然后...
AjaxUpload是基于Ajax技术的一种文件上传方式,它允许用户在不刷新整个页面的情况下上传文件,同时可以显示上传进度和错误提示,使得文件上传操作更加友好和高效。 **一、AjaxUpload工作原理** AjaxUpload的基本...
AjaxUpload是一款基于jQuery的插件,它允许用户在无需刷新页面的情况下上传文件。这个插件极大地提升了用户体验,因为它能够实现在后台处理文件上传,同时还可以自定义各种反馈机制,如进度条、消息提示等。在网页...
7. **ajax_uploader**:这可能是一个JavaScript文件,包含前端的Ajax上传实现,负责与服务器(ajaxupload.php)进行通信,提供用户界面反馈,如上传进度、错误提示等。 综合以上分析,这个源码包为PHP网站提供了一...
AjaxUpload是一款基于JavaScript和Ajax技术的文件上传插件,它允许用户在不刷新页面的情况下实现文件的上传,极大地提升了用户体验。这款插件以其简洁的API和高度的可定制性,在Web开发领域中广受欢迎。以下是关于...
AjaxUpload上传文件是一种基于Ajax技术的上传方式,它可以实现文件的实时上传,提高用户体验。这种方式的优点是,上传文件的速度相对较快,且可以实时显示上传进度。但是,AjaxUpload上传文件也存在一些缺陷,例如...
它利用IFrame或者Flash来模拟Ajax上传,确保了较好的兼容性。同样,`ajaxfileupload.js`也提供了丰富的事件回调,如onStart、onComplete、onProgress等,让你能根据实际需求定制上传行为。使用此库时,你需要引入...