最近研究了一下如何利用javascript進行檔案分割上傳並且透過後端。特地記錄一下相關的用法
先寫限制跟本篇的一些陷阱
1．就是瀏覽器的支援了 因為本篇有用到blob跟webworker
在ie中需要最少10版以上才有支援以下的方法喔！
2．因為我這是簡單的測試，所以我是將檔案存放在Session當中，實際要使用的話。應該會是將檔案分割存放在檔案系統中
廢話就不多說，我們先來看js端的程式碼
self.onmessage = function (e) {
////web worker started
var blob = e.data.file; //取得檔案內容
const SPLIT_BYTES = 100 * 1024; //檔案以每100KB做切割
const SIZE = blob.size; //檔案的大小
var start = 0; //位元組數的開頭
var end = SPLIT_BYTES; //位元組數的結束
var count = SIZE % SPLIT_BYTES == 0 ? SIZE / SPLIT_BYTES : Math.floor(SIZE / SPLIT_BYTES) + 1;
//上述為計算一共會切出幾份檔案
var intIdentifier = 1;
var completed = 0;
var xhr = new self.XMLHttpRequest();
xhr.onload = function () {
completed++; //完成上傳的計數器
if (completed === count) {
//當最後一個檔案成功上傳時，通知後端做檔案處理
uploadComplete(e.data.pid, blob.name);
}
}
//這裡代表當檔案可以進行切割時，就利用切割進行檔案上傳
if(SIZE>SPLIT_BYTES){
for (var i = 1; i <= count; i++) {
var chunk = blob.slice(start, end); //##這裡需要特別注意的是，我們利用slice來將檔案的位元組數做"分段(切割)"讀取
var url = '/Oberto/Manager/Home/fileUpload/' + intIdentifier + '?name=' + e.data.pid + "&filename=" + blob.name +"&cache="+Date.now();
xhr.open('POST', url, false);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(chunk);
//因為我們是"分段(切割)"做處理，所以我們的start與end要跟著做移動
start = end;
end = start + SPLIT_BYTES;
intIdentifier++;
}
} else {
//這裡就是一般的檔案上傳動作了
var url = '/Oberto/Manager/Home/fileUpload/' + intIdentifier + '?name=' + e.data.pid + "&filename=" + blob.name + "&cache=" + Date.now();
xhr.open('POST', url, false);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(blob.slice(start, SIZE));
}
//這裡則是當分割的檔案上傳完成後，要通知後端處理
function uploadComplete(id, name) {
var url1 = '/Oberto/Manager/Home/UploadComplete?id=' + id + "&filename=" + name + "&semesterID=" + e.data.semesterID + "&cache=" + Date.now();;
var xhr1 = new self.XMLHttpRequest();
xhr1.onload = function (e) {
var result = JSON.parse(xhr1.response);
self.postMessage(result);
}
xhr1.open('POST', url1, true);
xhr1.send(null);
}
}
以上是我webwork程式所執行的內容，比較需要注意的部分是在於你需要利用blob.slice進行檔案分段的處理。
而我因為方便，將最後完成處理與分段上傳的動作分為兩個。因此在後端也會有相對應的程式碼
[HttpPost]
[ValidateInput(false)]
public string fileUpload(int id)
{
//這裡依照傳送過來的檔案大小，建立對應的byte陣列進行接收
byte[] chunk = new byte[Request.InputStream.Length];
//這裡就將檔案內容存入剛剛建立的byte陣列裡
Request.InputStream.Read(chunk, , Convert.ToInt32(Request.InputStream.Length));
if (Session["tempFiles"] == null)
{
Session["tempFiles"] = chunk;
//因為我這裡是利用Session當示範，所以利用Session進行存放
}
else
{
//當已經接收過檔案時，這裡就額外建立一個合併用的byte
//然後利用BlockCopy做合併的動作
byte[] tempChunk = Session["tempFiles"] as byte[];
byte[] newChunk = new byte[tempChunk.Length + chunk.Length]; Buffer.BlockCopy(tempChunk, , newChunk, , tempChunk.Length);
Buffer.BlockCopy(chunk, , newChunk,tempChunk.Length, chunk.Length);
Session["tempFiles"] = newChunk;
}
return "InComplete";
}
以上就是後端如何接收與處理分割後的檔案。至於完成後的處理，就看各位如何做了
我的最終完成後的處理其實就很簡單的將我Session存放的內容轉換成檔案放置到我的伺服器目錄下
這篇算是比較完整的從前端到後端整個分割檔案處理的流程
這裡有一點要注意的是，平常我們用XMLHttpRequest的時候做資料POST或GET 都會用非同步的方式 e.g. xhr1.open( 'POST', url1, true);
而因為都用了Web Wroker了(也就是建一個新的執行緒，所以就算用同步也不會lock住我們目前頁面的主執行緒)
這裡就可以改成同步，否則在非同步的情況下，透過FIDDLER會抓到Content-Length dismatch的錯誤
如果各位有什麼問題，歡迎留言發問唷
參考：