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 _οnclick='UploadControl.prototype.uploadAllItems()' _ID='ImageButton3'  src='../share/imgs/btn_upload.gif' style='cursor:pointer'/></td>" +

              "<td style='width: 140px; height: 32px;' align='right'>" +

              "<img _οnclick='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";