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