目錄

• 一、分塊上傳流程
• 二、實(shí)現(xiàn)代碼
• HTML
• JS
• PHP

我們在上傳大文件時，可能會由于服務(wù)器的原因?qū)е挛募蟼魇。募^大時由于服務(wù)器的配置或響應(yīng)事件過長導(dǎo)致上傳文件失敗，這時候我們可以將一個大的文件分為若干塊，然后分批次上傳到服務(wù)端，當(dāng)所有文件塊上傳完成后再由服務(wù)器將各個文件塊整合成我們上傳的文件

一、分塊上傳流程

1：由前端js將上傳的文件信息進(jìn)行切割成若干塊，然后循環(huán)將若干塊的文件塊上傳到服務(wù)端

2：服務(wù)端接收到文件塊信息后保存起來，當(dāng)所有文件塊上傳完畢后，將所有上傳的文件塊整合成文件并保存起來

二、實(shí)現(xiàn)代碼

HTML

<input type="file" id="file">
<input type="button" id="upload" value="上傳">
<input type="button" id="stop" value="停止">
<input type="button" id="restart" value="繼續(xù)上傳">
上傳進(jìn)度：<span id="progress"></span>

JS

//獲取節(jié)點(diǎn)
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 () {
   upload_instance.addFileAndSend(fileForm);
   return false;
}
stopBtn.onclick = function () {
   upload_instance.stop();
   return false;
}
restartBtn.onclick = function () {
   upload_instance.start();
   return false;
}
function Upload() {
    //判斷瀏覽器類型
    if (window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
var xhr=new XMLHttpRequest();
    }else{
//IE6, IE5
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
   //上傳文件
   this.addFileAndSend = function (that) {
       file = that.files[0];
       blob = cutFile(file);
       //上傳
       uploadFile(blob, file);
       blob_num += 1;
   }
   //停止文件上傳
   this.stop = function () {
       xhr.abort();
       is_stop = 1;
   }
   this.start = function () {
       uploadFile(blob, file);
       is_stop = 0;
   }
   //切割文件
   function cutFile(file) {
       var file_blob = file.slice(start, end);
       start = end;
       end = start + LENGTH;
       return file_blob;
   };
    //上傳文件
    function uploadFile(blob, file) {
var form_data = new FormData();
var total_blob_num = Math.ceil(file.size / LENGTH);
//上傳文件信息
form_data.append("file", blob);
//上傳的第幾個文件塊
form_data.append("blob_num", blob_num);
//總文件塊數(shù)
form_data.append("total_blob_num", total_blob_num);
//文件名稱
form_data.append("file_name", file.name);


//上傳
xhr.open("POST", "./test.php", false);
xhr.onreadystatechange = function () {
    //獲取上傳進(jìn)度
    if (total_blob_num == 1) {
progressText = "100%";
    } else {
progressText = (Math.min(100, (blob_num / total_blob_num) * 100)).toFixed(2) + "%";
    }
    var progress = document.getElementById("progress");
    progress.innerHTML = progressText;
    
    //循環(huán)執(zhí)行上傳，直到所有文件塊上傳完成
    var t = setTimeout(function () {
if (start < file.size && is_stop == 0) {
    blob = cutFile(file);
    uploadFile(blob, file);
    blob_num += 1;
} else {
    //所有文件塊上傳完成
}
    }, 1000);
}
xhr.send(form_data);
//每次文件塊上傳后，清空上傳信息
form_data = "";
    }
}

PHP

上傳類

class Upload
{
    /**
     * @var string 上傳目錄
     */
    private $filepath = "./upload"; //上傳目錄
    /**
     * @var string 塊文件臨時存儲的位置
     */
    private $tmpPath;
    /**
     * @var integer 第幾個文件塊
     */
    private $blobNum;
    /**
     * @var integer //文件塊總數(shù)
     */
    private $totalBlobNum;
    /**
     * @var string 上傳文件名
     */
    private $fileName;
    public function __construct($tmpPath, $blobNum,$totalBlobNum,$fileName, $filepath = ""){
if (!empty($filepath)) {
    $this->filepath = $filepath;
}
$this->tmpPath = $tmpPath;
$this->blobNum = $blobNum;
$this->totalBlobNum = $totalBlobNum;
$this->fileName = $fileName;
//保存文件塊
$this->moveFile();
//保存文件
$this->fileMerge();
    }
    private function fileMerge(){
//當(dāng)文件塊都上傳后將文件塊整合成文件
if($this->blobNum == $this->totalBlobNum){
    for($i=1; $i<= $this->totalBlobNum; $i++){
$blob = "";
$blob = file_get_contents($this->filepath."/". $this->fileName."__".$i);
file_put_contents($this->filepath."/". $this->fileName, $blob, FILE_APPEND );
unset($blob);
    }
    //刪除文件塊
    $this->deleteFileBlob();
}
    }
    //刪除文件塊
    private function deleteFileBlob(){
for($i=1; $i<= $this->totalBlobNum; $i++){
    @unlink($this->filepath."/". $this->fileName."__".$i);
}
    }
    private function moveFile(){
$this->touchDir();
$filename = $this->filepath."/". $this->fileName."__".$this->blobNum;
//保存文件塊
 move_uploaded_file($this->tmpPath,$filename);
    }
    //上傳返回
    public function uploadReturn(){
if($this->blobNum == $this->totalBlobNum){
    if(file_exists($this->filepath."/". $this->fileName)){
return [
    "code" => 2,
    "message" => "success",
    "file_path" => "http://".$_SERVER["HTTP_HOST"].str_replace(".","",$this->filepath)."/". $this->fileName,
    "local_path" => str_replace(".","",$this->filepath)."/". $this->fileName
];
    }
}
return [
    "code" => 1,
    "message" => "waiting",
];
    }
    /**
     * 創(chuàng)建目錄
     */
    private function touchDir(){
if(!file_exists($this->filepath)){
    return mkdir($this->filepath);
}
    }
}

調(diào)用上傳類

$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();
header("Content-type: application/json");
return json_encode($data);

根據(jù)如上步驟就可以實(shí)現(xiàn)將文件分成若干塊進(jìn)行上傳功能

到此這篇關(guān)于PHP+JS實(shí)現(xiàn)文件分塊上傳的示例代碼的文章就介紹到這了,更多相關(guān)PHP JS文件分塊上傳內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！