php js實現檔案分塊上傳

2021-10-11 16:13:42 字數 2570 閱讀 8909

我們在上傳大檔案時,可能會由於伺服器的原因導致檔案上傳失敗,檔案過大時由於伺服器的配置或響應事件過長導致上傳檔案失敗,這時候我們可以將乙個大的檔案分為若干塊,然後分批次上傳到服務端,當所有檔案塊上傳完成後再由伺服器將各個檔案塊整合成我們上傳的檔案

一:分塊上傳流程:

1:由前端js將上傳的檔案資訊進行切割成若干塊,然後迴圈將若干塊的檔案塊上傳到服務端

2:服務端接收到檔案塊資訊後儲存起來,當所有檔案塊上傳完畢後,將所有上傳的檔案塊整合成檔案並儲存起來

二:實現**:

1:html

上傳進度:
2:js

//獲取節點

var fileform = document.getelementbyid("file");

var uploadbtn = document.getelementbyid('upload');

var stopbtn = document.getelementbyid('stop');

var restartbtn = document.getelementbyid('restart');

//定義常量

const length = 100 * 1024;//每個上傳的檔案塊大小(100kb)

var start = 0;

var end = length + start;

var blob;

var is_stop = 0;

var blob_num = 1;

var file = null;

var upload_instance = new upload();

//上傳事件

uploadbtn.onclick = function ()

stopbtn.onclick = function ()

restartbtn.onclick = function ()

function upload() else

//上傳檔案

this.addfileandsend = function (that)

//停止檔案上傳

this.stop = function ()

this.start = function ()

//切割檔案

function cutfile(file) ;

//上傳檔案

function uploadfile(blob, file) else

var progress = document.getelementbyid('progress');

progress.innerhtml = progresstext;

//迴圈執行上傳,直到所有檔案塊上傳完成

var t = settimeout(function () else

}, 1000);

}xhr.send(form_data);

//每次檔案塊上傳後,清空上傳資訊

form_data = "";

}}

3:php

(1):上傳類:

class upload

$this->tmppath = $tmppath;

$this->blobnum = $blobnum;

$this->totalblobnum = $totalblobnum;

$this->filename = $filename;

//儲存檔案塊

$this->movefile();

//儲存檔案

$this->filemerge();

}private function filemerge()

//刪除檔案塊

$this->deletefileblob();}}

//刪除檔案塊

private function deletefileblob()

}private function movefile()

//上傳返回

public function uploadreturn()

}return [

'code' => 1,

'message' => 'waiting',];}

/*** 建立目錄

*/private function touchdir()

}}

呼叫上傳類

$tmpname = $_files['file']['tmp_name'];

$blobnum = $_post['blob_num'];

$totalblobnum = $_post['total_blob_num'];

$filename = $_post['file_name'];

$upload = new upload($tmpname, $blobnum, $totalblobnum, $filename);

$data = $upload->uploadreturn();

return json_encode($data);

根據如上步驟就可以實現將檔案分成若干塊進行上傳功能

利用Xmlhttp 分塊上傳檔案

利用xmlhttp 分塊上傳檔案 分類 dff 編寫思路 把本地檔案在客戶端通過base64編碼以後傳送目的地.測試過程中,上傳檔案過大,導致超時不成功.後來經過改善.把編碼分段傳送.測試20m成功 編寫目的 在傳統的解決方案裡面,一次一次選取上傳可以.但是在碰到把資料庫裡檔案路徑讀出來,並把這些檔...

IHttpModule 分塊上傳大檔案

1.一般的在asp.net裡上傳檔案都是10m左右,要做到大檔案上傳,必須要改web.config,不過改了web.config有時候也上傳不成功,那是每次上傳的檔案太大,瀏覽器在這個過程中會超時,採用分塊上傳的方法就可以避免這種情況。2.分塊上傳就是利用post的方法,把資料分塊上傳,每塊上傳的資...

IHttpModule 分塊上傳大檔案

1.一般的在asp.net裡上傳檔案都是10m左右,要做到大檔案上傳,必須要改web.config,不過改了web.config有時候也上傳不成功,那是每次上傳的檔案太大,瀏覽器在這個過程中會超時,採用分塊上傳的方法就可以避免這種情況。2.分塊上傳就是利用post的方法,把資料分塊上傳,每塊上傳的資...