ajax提交百分比,基本于Javascript的Ajax多文件上传带进度条百分比（一）

对于页面来说实现多文件上传，主要的难点是在点击上传后，页面会阻塞，无法进行其它操作，直到后台上传的文件响应；还就是对上传进度条的实时数据展示，这些问题已经得到了解决，下面将集中讨论实现：

1、对于第一个问题：上传页面卡死现象，可以通地ajax异步实现，这样页面不会假死，可以操作另外的文件上传。由于对于

put type=file />来说，点击后的会使用页面跳，所以在

中指定target属性，使其结果显示到指的iframe，，这样就达到了页面不会卡死、不会跳转的功能。对于JQuery.upload内部也是基于此原理实现的。

在每个file 上传，在form中target动态一个iframe,做一个单元，实现一个文件上传。

《ifdrame

id="myiframe" /》

《form action=""

method="POST"target=myiframe“ enctype="multipart/form-data》

2、对于进度条的实时显示问题，实现方式有很多方式，在DWR中有主动与被加载区别。

由于进度条实时性要求比较高，所以采用主动方式会好些，但这样会对服务器造成负荷，慎用。

方式1：页面可以定时刷新，Ajax异步从后台获取文件上传进度，通过javascript更新进度条消息

方式2：采用HTTP长连接方式，最接近实时获取上传进度，就是在ifram里边src设置获取进度的URL，从后台现数据，在ifram页里展示，但由于文档规定，对于IE，一个URL只能有不超过两个HTTP长连接，对于第三个，会等前边释放再进行连接，对于往回写内容最好是javascrip的函数的调用形式，这样，写回一条就会在页执行，如：

《script 》updateBar();《script》

3、java后台采用apache的upload第三方jar包，这样可以获取文件上传的进度，而struts2内部会自动上传文件，对于得到的File是已经上传好的临时文件。

效果：

1、打开上面页面代码：

F u n c t i o n  openWin() {

wind ow.op en("ch.jsp", "upload",

"toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=no,width=400,height=250");

}

2、上传javascript代码：

//jQuery.extend({

// createUploadIframe: function(id, uri)

// {

// //create

frame

// var frameId = 'jUploadFrame' + id;

// var iframeHtml = '

name="' + frameId + '" style="position:absolute; top:-9999px;

left:-9999px"';

// if(window.ActiveXObject)

// {

// if(typeof uri== 'boolean'){

// iframeHtml

+= ' src="' + 'javascript:false' + '"';

//

// }

// else if(typeof uri== 'string'){

// iframeHtml

+= ' src="' + uri + '"';

//

// } // }

// iframeHtml

+= ' />';

// jQuery(iframeHtml).appendTo(document.body);

//

// return jQuery('#' +

frameId).get(0); // },

// createUploadForm: function(id, fileElementId,data)

// {

// //create

form // var formId = 'jUploadForm' +

id;

// var fileId = 'jUploadFile' +

id;

// var form =

jQuery('

method="POST" name="' + formId + '" id="' + formId + '"

enctype="multipart/form-data">

'); // var oldElement = jQuery('#' +

fileElementId);

// var newElement =

jQuery(oldElement).clone();

// jQuery(oldElement).attr('id',

fileId);

// jQuery(oldElement).before(newElement);

// jQuery(oldElement).appendTo(form);

// newElement.val('');

// //添加参数支持

// if(data){

// $.each(data,function(key,value){

// $("

type='hidden' name='"+key+"'

value='"+value+"'/>").appendTo(form);

// })

// }

// //set attributes

// jQuery(form).css('position',

'absolute');

// jQuery(form).css('top',

'-1200px');

// jQuery(form).css('left',

'-1200px');

// jQuery(form).appendTo('body'); // return form;

// },

//

// ajaxFileUpload: function(s) {

// // TODO introduce global settings, allowing the client to modify

them for all requests, not only

timeout // s = jQuery.extend({}, jQuery.ajaxSettings, s);

// var id =

s.genId; // var form =

jQuery.createUploadForm(id, s.fileElementId,s.data);

// var io =

jQuery.createUploadIframe(id, s.secureuri);

// var frameId = 'jUploadFrame'

+ id;

// var formId = 'jUploadForm' +

id; // // Watch for a new set of requests

//