php+html5實現無重新整理上傳，大檔案分區上傳，斷點續傳

理清思路：

引入了兩個概念：塊（block）和片（chunk）。每個塊由一到多個片組成，而一個資源則由一到多個塊組成

塊是服務端的永久資料存放區單位，片則只在分區上傳過程中作為臨時儲存的單位。服務端會以約一個月為單位周期性的清除上傳後未被合并為塊的資料片

實現過程：

將檔案分割，分區上傳，然後合并

前端核心code：

var fileForm = document.getElementById("file");  var upstartBtn = document.getElementById('upstart');  var stopBtn = document.getElementById('stop');  var startBtn = document.getElementById('restart');  var rate = document.getElementById('rate');  var divlog = document.getElementById('divlog');  //---------------------------  const LENGTH = 1024 * 1024 * 1;  var start = 0;  var end = start + LENGTH;  var blob;  var blob_num = 1;  var is_stop = 0  var file = null;    var md5filename = '';    //-----------------------------  var upload_instance = new Upload();     fileForm.onchange = function()  {    browserMD5File(fileForm.files[0], function (err, md5) { //如果檔案大，md5值產生較慢  md5值產生後才能上傳處理，自己最佳化下吧        md5filename = md5;                                  //如果需要重新整理後也能斷點，可利用cookie記錄，自行完善           divlog.innerHTML = '檔案md5為：' + md5filename;    });  }   upstartBtn.onclick = function(){    upload_instance.addFileAndSend(fileForm);    }   stopBtn.onclick = function(){    upload_instance.stop();  }    startBtn.onclick = function(){    upload_instance.start();  }   function Upload(){    var xhr = new XMLHttpRequest();    var form_data = new FormData();        //對外方法，傳入檔案對象    this.addFileAndSend = function(that){      file = that.files[0];      blob = cutFile(file);      sendFile(blob,file);      blob_num += 1;    }    //停止檔案上傳    this.stop = function(){      xhr.abort();      is_stop = 1;    }        this.start = function(){      sendFile(blob,file);        is_stop = 0;    }        //切割檔案    function cutFile(file){      var file_blob = file.slice(start,end);      start = end;      end = start + LENGTH;      return file_blob;    };    //傳送檔案    function sendFile(blob,file){      var total_blob_num = Math.ceil(file.size / LENGTH);      form_data.append('file',blob);      form_data.append('blob_num',blob_num);      form_data.append('total_blob_num',total_blob_num);      form_data.append('md5_file_name',md5filename);      form_data.append('file_name',file.name);       xhr.open('POST','./index.php',false);            xhr.onreadystatechange = function () {                var progress;        var progressObj = document.getElementById('finish');        if(total_blob_num == 1){          progress = '100%';        }else{          progress = (Math.min(100,(blob_num/total_blob_num)* 100 )).toFixed(2) +'%';        }        console.log('progress-----'+progress);        progressObj.style.width = progress;        rate.innerHTML = progress;                var t = setTimeout(function(){          if(start < file.size && is_stop === 0){            blob = cutFile(file);            sendFile(blob,file);            blob_num += 1;          }else{                        //setTimeout(t);          }        },1000);      }      xhr.send(form_data);    }  }

後端code

<?phpclass Upload{  private $filepath = './upload'; //上傳目錄  private $tmpPath; //PHP檔案臨時目錄  private $blobNum; //第幾個檔案塊  private $totalBlobNum; //檔案塊總數  private $fileName; //檔案名稱  private $md5FileName;   public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){    $this->tmpPath = $tmpPath;    $this->blobNum = $blobNum;    $this->totalBlobNum = $totalBlobNum;    $this->fileName = $this->createName($fileName, $md5FileName);    $this->moveFile();    $this->fileMerge();  }     //判斷是否是最後一塊，如果是則進行檔案合成並且刪除檔案塊  private function fileMerge(){    if($this->blobNum == $this->totalBlobNum){      $blob = '';      for($i=1; $i<= $this->totalBlobNum; $i++){        $blob .= file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);      }      file_put_contents($this->filepath.'/'. $this->fileName,$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);  }     //API返回資料  public function apiReturn(){    if($this->blobNum == $this->totalBlobNum){        if(file_exists($this->filepath.'/'. $this->fileName)){          $data['code'] = 2;          $data['msg'] = 'success';          $data['file_path'] = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['DOCUMENT_URI']).str_replace('.','',$this->filepath).'/'. $this->fileName;        }    }else{        if(file_exists($this->filepath.'/'. $this->fileName.'__'.$this->blobNum)){          $data['code'] = 1;          $data['msg'] = 'waiting';          $data['file_path'] = '';        }    }    header('Content-type: application/json');    echo json_encode($data);  }       private function touchDir(){    if(!file_exists($this->filepath)){      return mkdir($this->filepath);    }  }    private function createName($fileName, $md5FileName){     return $md5FileName . '.' . pathinfo($fileName)['extension'];  }} $upload = new Upload($_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name'],$_POST['md5_file_name']);$upload->apiReturn();

完整代碼，這裡下載=》》》 

https://download.csdn.net/download/qq43599939/10319668