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及以上