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