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();
        }
    }
}