js實現分段上傳文件

使用js實現分段上傳文件，本文使用了FileReader對象，可參考：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

1）獲取文件，分段讀取

function WebDav_Upload() {
     var file = document.getElementById('WebdavFileToUpload').files[0];
        if (window.FileReader ){
              if(file) {
                 total_file_size=file.size;
                 fromSize=ToSize;
                 ToSize=ToSize+ 4 * 1024;
                if(ToSize>file.size){
                    ToSize=file.size;
                }
                     
                var reader = new FileReader();     
                var blob;
                if(file.webkitSlice) {
                      blob = file.webkitSlice(fromSize, ToSize);
                   }else if (file.mozSlice) {
                      blob = file.mozSlice(fromSize, ToSize );
                }else{
                    blob=file.slice(fromSize,ToSize);
                }
                reader.onprogress=function(p){                
                    if (p.loaded){
                    }else {
                    }
                }
                reader.onloadend = function(){
                    if(isBrowser()=='IE'){
                        WebDav_PutSyncXML_IE11(Path_Name+file.name,file.type,fromSize,ToSize,file.size,reader.result);
                    }else{
                        WebDav_PutSyncXML(Path_Name+file.name,file.type,fromSize,ToSize,file.size,reader.result);
                    }                        
                     if (reader.error){ 
                    } else {
                    }
                 } 
                if(isBrowser()=='IE'){             
                     reader.readAsArrayBuffer(blob);
                 }else{
                     reader.readAsBinaryString(blob); 
                 }                        
             }
        }else{
            showAlert("lupdateBrowser");
            return;
        }
}

2）使用ajax 上傳文件

function WebDav_PutSyncXML(xmlName,FileType,FileDataFrom,FileDataTo,FileDataTotal,FileData) {
    var host = window.location.protocol + "//" + window.location.host ;
    var xmlNametemp=xmlName.replace(new RegExp("#","gm"),"%23");
    var url = host + "/webdav" + xmlNametemp;
    var content;
    content=$.ajax( {
    type: "PUT",
    processData: false,
    contentType: false,
    xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (!xhr.sendAsBinary) {
                xhr.legacySend = xhr.send;
                xhr.sendAsBinary = function(string) {
                    var bytes = Array.prototype.map.call(string, function(c) {
                        return c.charCodeAt(0) & 0xff;
                    });
                    this.legacySend(new Uint8Array(bytes).buffer);
                };
            }
            xhr.send = xhr.sendAsBinary;
            return xhr;
        },
    'beforeSend': function(xhr) {
            xhr.setRequestHeader("Authorization",webdav_getAuthHeader("PUT"));
            xhr.setRequestHeader("Content-Type", FileType);
            if(FileDataFrom!=0) {
                xhr.setRequestHeader("Content-Range", "bytes "+FileDataFrom+"-"+FileDataTo+"/"+FileDataTotal);
            }
        },

    url: url,
    data: FileData,
    async: true,
    success:function(data, textStatus) {
            WebDav_Upload_Ondoing();
        },
    complete: function(XMLHttpRequest, textStatus) {
        },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        }
    }).responseXML;
    return content;

}

 

3）處理上傳進度條

function WebDav_Upload_Ondoing() {
    if(Cancel_flag==1){
        var cancelfilename=document.getElementById('webdavuploadschedule_FileName').innerHTML;

        WebDav_Delete(cancelfilename);
        fromSize=0;
        ToSize=0;
        setTimeout("clear_upload_barview_function();",100);
        return;
    }
    if(Pause_flag==1){
        return;
    }else{
        if(ToSize>=total_file_size){    
            fromSize=0;
            ToSize=0;
            document.getElementById("bar").style.width = 100 + "%"; 
            document.getElementById("bar").innerHTML = document.getElementById("bar").style.width;
            setTimeout("clear_upload_barview_function();",800);
            
            $("#mWebDav").objWebDav().onLoad(true);
        }else{
            var bar_length;
            bar_length=Math.floor((ToSize/total_file_size)*100);
            document.getElementById("bar").style.width = bar_length + "%"; 
            document.getElementById("bar").innerHTML = document.getElementById("bar").style.width;
            WebDav_Upload();
        }
    }
}

 

 

 

補充：FileReader用法：

FileReader對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始緩衝區）的內容，使用File或Blob對象指定要讀取的文件或數據

這裏File對象能夠是來自<input>元素上選擇文件後返回的FileList對象：document.getElementById("input").file[0]

　　或者使用onchange事件:<input type="file" id='input' onchange='handleFile(this.files)'>

　　若是是多個文件，只須要加上一個multiple屬性便可：<input type='file' id='input' multiple onchange='handleFile(this.files)'>

也能夠來自拖放操做生成的DataTransfer對象，還能夠是來自一個HTMLCanvasElement上執行mozGetAsFile()方法後返回的結果。

1）構造函數：reader = FileReader()

2）屬性：

　　FileReader.error：只讀，一個DOMException，表示讀取文件時發生的錯誤

　　FileReader.readyState：三個取值

　　　　EMPTY　　　　0　　尚未加載任何數據

　　　　LOADING　　　1　　數據正在被加載

　　　　DONE　　　　   2　　已完成所有的讀取請求

　　FileReader.result：文件的內容。該屬性僅在讀取操做完成後纔有效，數據的格式取決於使用哪一個方法來啓動讀取操做

3）事件處理：

　　FileReader.onabort：處理abort事件。該事件在讀取操做被中斷時觸發

　　FileReader.onerror：處理error事件。該事件在讀取操做發生錯誤時觸發

　　FileReader.onload：處理load事件。該事件在讀取完成時觸發

　　FileReader.onloadstart：處理loadstart事件。該事件在讀取開始時觸發

　　FileReader.onloadend：處理loadend事件。該事件在讀取結束時（成功或者失敗）觸發

　　FileReader.onprogress：處理progress事件。該事件在讀取Blob時觸發

　　*****由於FileReader繼承自EventTarget，因此這些事件也能夠經過addEventListener方法使用*****

 4）方法：

　　FileReader.abort()：停止讀取操做。在返回時，readyState爲None

　　FileReader.readAsArrayBuffer()：開始讀取指定的Blob中的內容。一旦完成，result屬性中保存的將是被讀取文件的ArrayBuffer數據對象

　　FileReader.readAsDataURL()：開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data：URL格式的字符串以表示所讀取的內容

　　FileReader.readAsText()：開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字符串用於表示所讀取的文件內容

https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

兼容：IE10及以上