AJAX实现的文件上传进度控制的研究
dhtmlXVault 用户指南
1.主要特征
跨浏览器/多平台支持
每个文件都有进度条
全部用JavaScript控制
支持ASP.NET
支持JSP
支持PHP/Perl
2.支持的浏览器
· IE 5.x 和以上版本
· Mozilla 1.4和以上版本
· FireFox 0.9和以上版本
3. dhtmlXVault工作过程
3.1在页面上初始化一个对象
3.2服务器处理描述
· Upload处理
-是上传得主要处理方法.它是在服务器上来解析请求对象（来自表单数据的多个部分）和存储文件。 同样，收集进度信息和在应用和会话上下文保存它，因为下个处理会读到它。
· GetInfo 处理 – 针对返回进度信息来处理（作为上传的百分率）。
· GetId 处理 –只要你一上传，处理就会调用，来获取唯一的文件传输Id。这个值在以后上传得进度信息会读到。
4.运行的界面：
5.dhtmlXVault.js：
dhtmlXVaultObject = function()
{
this.isUploadFile = "false";
this.isUploadFileAll = "false";
this.countRows = null;
this.idRowSelected = null;
this.sessionId = null;
//server handlers
this.pathUploadHandler = null;
this.pathGetInfoHandler = null;
this.pathGetIdHandler = null;
//demo
this.isDemo = true;
this.progressDemo = null;
//from PHP
this.MAX_FILE_SIZE = null;
this.UPLOAD_IDENTIFIER = null;
}
dhtmlXVaultObject.prototype.setServerHandlers = function(uploadHandler, getInfoHandler, getIdHandler)
{
this.pathUploadHandler = uploadHandler;
this.pathGetInfoHandler = getInfoHandler;
this.pathGetIdHandler = getIdHandler;
}
dhtmlXVaultObject.prototype.create = function(htmlObject)
{
this.parentObject = document.getElementById(htmlObject);
this.parentObject.style.position = "relative";
this.parentObject.innerHTML = "<iframe src='about:blank' id='dhtmlxVaultUploadFrame' name='dhtmlxVaultUploadFrame' style='display:none'></iframe>";
this.containerDiv = document.createElement("div");
this.containerDiv.style.cssText = "position:absolute;overflow-y:auto;height:190px;background-color:#FFFFFF;border:1px solid #878E95;top:10px;left:10px;z-index:10;width:410px";
this.parentObject.appendChild(this.containerDiv);
this.container = document.createElement("div");
this.container.style.position = "relative";
var str = "<table style='background-color:#EDEEEF;border: 1px solid #7A7C80;' border='0'>" +
"<tr><td style='width:420px' colspan=3 align='center' id = 'cellContainer' >" +
"<div style='height:200px;'></div>" +
"</td></tr>" +
"<tr><td style=';width: 80px; height: 32px;' align='left'></td>" +
"<td style='width: 200px; height: 32px;' align='left'>" +
"<img _onclick='UploadControl.prototype.uploadAllItems()' _ID='ImageButton3' src='../share/imgs/btn_upload.gif' style='cursor:pointer'/></td>" +
"<td style='width: 140px; height: 32px;' align='right'>" +
"<img _onclick='return UploadControl.prototype.removeAllItems()' _ID='ImageButton3' src='../share/imgs/btn_clean.gif' style='cursor:pointer;margin-right:20px'/></td></tr></table>" +
"<div _id='fileContainer' style='width:84px;overflow:hidden;height:32px;left:0px;direction:rtl;position:absolute;top:211px'>" +
"<img style='z-index:2' src='../share/imgs/btn_add.gif'/>" +
"<input type='file' id='file1' name='file1' value='' class='hidden' style='cursor:pointer;z-index:3;left:7px;position:absolute;height:25px;top:0px'/></div>";
this.container.innerHTML = str;
var self = this;
this.container.childNodes[0].rows[1].cells[1].childNodes[0].onclick = function() {
self.uploadAllItems()
};
this.container.childNodes[0].rows[1].cells[2].childNodes[0].onclick = function() {
self.removeAllItems()
};
this.fileContainer = this.container.childNodes[1];
this.fileContainer.childNodes[1].onchange = function() {
self.addFile()
};
this.uploadForm = document.createElement("form");
this.uploadForm.method = "post";
this.uploadForm.encoding = "multipart/form-data";
<span styl