雨枫技术教程网

 在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件同时上传应用.

实现功能

大概预览一下需要做的功能:

主要功能是用户可以直接把文件夹的文件直接拖放到网页中,并进行上传,在上传的过程中显示上传进度信息.

FileInfo类封装

为了方便读取文件信息,在原有File的基础封装了一个简单文件信息读取的对象类.

function FileInfo(file, pagesize) { 
 
    this.Size = file.size; 
 
    this.File = file; 
 
    this.FileType = file.type; 
 
    this.FileName = file.name; 
 
    this.PageSize = pagesize; 
 
    this.PageIndex = 0; 
 
    this.Pages = 0; 
 
    this.UploadError = null; 
 
    this.UploadProcess = null; 
 
    this.DataBuffer = null; 
 
    this.UploadBytes = 0; 
 
    this.ID = Math.floor(Math.random() * 0x10000).toString(16); 
 
    this.LoadCallBack = null; 
 
    if (Math.floor(this.Size % this.PageSize) > 0) { 
 
        this.Pages = Math.floor((this.Size / this.PageSize)) + 1; 
 
  
 
    } 
 
    else { 
 
        this.Pages = Math.floor(this.Size / this.PageSize); 
 
  
 
    } 
 
  
 
} 
 
FileInfo.prototype.Reset = function () { 
 
    this.PageIndex = 0; 
 
    this.UploadBytes = 0; 
 
} 
 
FileInfo.prototype.toBase64String = function () { 
 
    var binary = '' 
 
    var bytes = new Uint8Array(this.DataBuffer) 
 
    var len = bytes.byteLength; 
 
  
 
    for (var i = 0; i < len; i++) { 
 
        binary += String.fromCharCode(bytes[i]) 
 
    } 
 
    return window.btoa(binary); 
 
} 
 
FileInfo.prototype.OnLoadData = function (evt) { 
 
    var obj = evt.target["tag"]; 
 
  
 
    if (evt.target.readyState == FileReader.DONE) { 
 
        obj.DataBuffer = evt.target.result; 
 
        if (obj.LoadCallBack != null) 
 
            obj.LoadCallBack(obj); 
 
  
 
    } 
 
    else { 
 
        if (obj.UploadError != null) 
 
            obj.UploadError(fi, evt.target.error); 
 
    } 
 
  
 
} 
 
  
 
FileInfo.prototype.Load = function (completed) { 
 
    this.LoadCallBack = completed; 
 
    if (this.filereader == null || this.filereader == undefined) 
 
        this.filereader = new FileReader(); 
 
    var reader = this.filereader; 
 
    reader["tag"] = this; 
 
    reader.onloadend = this.OnLoadData; 
 
    var count = this.Size - this.PageIndex * this.PageSize; 
 
    if (count > this.PageSize) 
 
        count = this.PageSize; 
 
    this.UploadBytes += count; 
 
    var blob = this.File.slice(this.PageIndex * this.PageSize, this.PageIndex * this.PageSize + count); 
 
  
 
    reader.readAsArrayBuffer(blob); 
 
}; 
 
  
 
FileInfo.prototype.OnUploadData = function (file) { 
 
    var channel = file._channel; 
 
    var url = file._url; 
 
    channel.Send({ url: url, parameters: { FileID: file.ID, PageIndex: file.PageIndex, Pages: file.Pages, Base64Data: file.toBase64String()} }, function (result) { 
 
        if (result.status == null || result.status == undefined) { 
 
            file.PageIndex++; 
 
            if (file.UploadProcess != null) 
 
                file.UploadProcess(file); 
 
            if (file.PageIndex < file.Pages) { 
 
                file.Load(file.OnUploadData); 
 
            } 
 
        } 
 
        else { 
 
  
 
            if (file.UploadError != null) 
 
                file.UploadError(file, data.status); 
 
        } 
 
    }); 
 
} 
 
  
 
FileInfo.prototype.Upload = function (channel, url) { 
 
    var fi = this; 
 
    channel.Send({ url: url, parameters: { FileName: fi.FileName, Size: fi.Size, FileID: fi.ID} }, function (result) { 
 
        if (result.status == null || result.status == undefined) { 
 
            fi._channel = channel; 
 
            fi._url = result.data; 
 
            fi.Load(fi.OnUploadData); 
 
        } 
 
        else { 
 
            if (file.UploadError != null) 
 
                file.UploadError(fi, result.status); 
 
        } 
 
    }); 
 
  
 
}