`

掌控上传进度的AJAX Upload(转贴)

 
阅读更多
掌控上传进度的AJAX Upload

作者:cleverpig

image
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的实现:


image
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客户端代码:


image
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();
};
}
);
}



运行界面:


image
起始页面



image
上传进行中…



image
上传完成后的文件列表



image
用户取消上传后显示的页面




image
上传过程中出错(上传文件过大)页面



源代码下载:



相关链接:
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

分享到:
评论

相关推荐

    掌控上传进度的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

    ajaxupload.js ,ajax上传,具体用法可以自己查找教程。 ajaxupload.js ,ajax上传,具体用法可以自己查找教程。

    ajaxupload华丽的图片上传

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

    ajaxUpload.

    ajaxUpload.ajaxUpload.ajaxUpload.

    AjaxUpload.rar 文件上传

    AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传AjaxUpload.rar 文件上传

    ajax_uploadajax_upload

    ajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_uploadajax_upload

    jquery ajax upload

    ajaxupload.js,附demo例子 ajaxupload.js,附demo例子 ajaxupload.js,附demo例子 ajaxupload.js,附demo例子 ajaxupload.js,附demo例子

    Jquery AjaxUpload实现文件上传功能代码

    随着WEB技术的发展,用户体验成为衡量网站成功与否的关键,今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子,其中使用到了Jquery插件Ajaxupload,其可以实现单个文件和多文件上传功能。

    ajaxupload.3.6.js

    ajaxupload.3.6.js 上传插件

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

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

    通过AJAX监控文件上传进度

    很多时候需要上传附件到... 在使用Ajax进行附件上传进度查询的时候也想过,直接使用Ajax进行附件上传,在实现过程中发现问题比较多,所以就使用了变通的方式:使用标准的附件上传方式,结合Ajax进行上传的进度检查

    ajaxupload 单个按钮实现图片上传 步用file

    ajaxupload,c#上传,jquer上传,按钮上传,jquery,上传,ajaxupload单个按钮实现图片上传,不用file上传

    AjaxUpload.js

    AjaxUpload.js可以实现在Web应用系统开发中,文件上传和下载功能.使用方法参考: https://blog.csdn.net/liangmengbk/article/details/89333350

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

    以下是本人实现ajax上传图片时参考的文章,希望能对大家有帮助。

    ajaxupload上传

    ajaxupload上传ajaxupload上传ajaxupload上传

Global site tag (gtag.js) - Google Analytics