suchen

Heim >Backend-Entwicklung >PHP-Tutorial >So implementieren Sie einen aktualisierungsfreien Upload in PHP und HTML5

So implementieren Sie einen aktualisierungsfreien Upload in PHP und HTML5

小云云
小云云Original
2018-03-31 13:33:421378Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich die Methode zum Implementieren des aktualisierungsfreien Uploads in PHP und HTML5. Ich hoffe, er kann Ihnen helfen.

Adaptiert aus dem Internet----->>>>>>>>>

Klaren Sie Ihr Denken:

Führt zwei Konzepte ein: Block und Chunk. Jeder Block besteht aus einem oder mehreren Slices und eine Ressource besteht aus einem oder mehreren Blöcken

Ein Block ist eine permanente Datenspeichereinheit auf der Serverseite und a Das Slice befindet sich nur auf der Serverseite und wird während des mehrteiligen Upload-Vorgangs als temporäre Speichereinheit verwendet. Der Server löscht nach dem Hochladen in etwa einem Monat regelmäßig die Datenstücke, die nicht zu Blöcken zusammengeführt wurden.


Frontend-Code:

Backend-Code: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" ></script>
  <script src="./browser-md5-file.min.js" ></script>
  <title>Document</title>
  <style>
    #progress{
      width: 300px;
      height: 20px;
      background-color:#f7f7f7;
      box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
      border-radius:4px;
      background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);
    }
 
    #finish{
      background-color: #149bdf;
      background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
      background-size:40px 40px;
      height: 100%;
    }
    .upload{
      margin-top: 40px;
    }
    .log
    {
        margin-top: 40px;
    }
  </style>
</head>
<body>
<p id="progress">
  <p id="finish" style="width: 0%;" progress="0"></p>
  <span id="rate"></span>
</p>

<p class="upload">
   <input type="file" name="file" id="file">
  <input type="button" value="开始上传" id="upstart">
  <input type="button" value="停止" id="stop">
  <input type="button" value="重新开始" id="restart">
</p>

<p class="log">
日志：<p id="plog"></p>
</p>
  

<script>
  var fileForm = document.getElementById("file");
  var upstartBtn = document.getElementById(&#39;upstart&#39;);
  var stopBtn = document.getElementById(&#39;stop&#39;);
  var startBtn = document.getElementById(&#39;restart&#39;);
  var rate = document.getElementById(&#39;rate&#39;);
  var plog = document.getElementById(&#39;plog&#39;);
  //---------------------------
  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 = &#39;&#39;;
  
  //-----------------------------  
  var upload_instance = new Upload();
   
  fileForm.onchange = function()
  {
    browserMD5File(fileForm.files[0], function (err, md5) {
        md5filename = md5;
        plog.innerHTML = &#39;文件md5为：&#39; + 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){
       console.log("start========"+start);
       console.log("start========"+end);
      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(&#39;file&#39;,blob);
      form_data.append(&#39;blob_num&#39;,blob_num);
      form_data.append(&#39;total_blob_num&#39;,total_blob_num);
      form_data.append(&#39;md5_file_name&#39;,md5filename);
      form_data.append(&#39;file_name&#39;,file.name);
 
      xhr.open(&#39;POST&#39;,&#39;./index.php&#39;,false);
      
      xhr.onreadystatechange = function () {
        
        console.log(xhr.readyState);
        var progress;
        var progressObj = document.getElementById(&#39;finish&#39;);
        if(total_blob_num == 1){
          progress = &#39;100%&#39;;
        }else{
          progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +&#39;%&#39;;
        }
        console.log(&#39;progress-----&#39;+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);
      }
      console.log(&#39;test&#39;);
      xhr.send(form_data);
    }
  }
 
</script>
</body>
</html>

Verwandte Empfehlungen:

jQuery-Plugin zum Hochladen von Bildern ohne Aktualisierung 
<?php

class Upload{
  private $filepath = &#39;./upload&#39;; //上传目录
  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 = &#39;&#39;;
      for($i=1; $i<= $this->totalBlobNum; $i++){
        $blob .= file_get_contents($this->filepath.&#39;/&#39;. $this->fileName.&#39;__&#39;.$i);
      }
      file_put_contents($this->filepath.&#39;/&#39;. $this->fileName,$blob);
      $this->deleteFileBlob();
    }
  }
   
  //删除文件块
  private function deleteFileBlob(){
    for($i=1; $i<= $this->totalBlobNum; $i++){
      @unlink($this->filepath.&#39;/&#39;. $this->fileName.&#39;__&#39;.$i);
    }
  }
   
  //移动文件
  private function moveFile(){
    $this->touchDir();
    $filename = $this->filepath.&#39;/&#39;. $this->fileName.&#39;__&#39;.$this->blobNum;
    move_uploaded_file($this->tmpPath,$filename);
  }
   
  //API返回数据
  public function apiReturn(){
    if($this->blobNum == $this->totalBlobNum){
        if(file_exists($this->filepath.&#39;/&#39;. $this->fileName)){
          $data[&#39;code&#39;] = 2;
          $data[&#39;msg&#39;] = &#39;success&#39;;
          $data[&#39;file_path&#39;] = &#39;http://&#39;.$_SERVER[&#39;HTTP_HOST&#39;].dirname($_SERVER[&#39;DOCUMENT_URI&#39;]).str_replace(&#39;.&#39;,&#39;&#39;,$this->filepath).&#39;/&#39;. $this->fileName;
        }
    }else{
        if(file_exists($this->filepath.&#39;/&#39;. $this->fileName.&#39;__&#39;.$this->blobNum)){
          $data[&#39;code&#39;] = 1;
          $data[&#39;msg&#39;] = &#39;waiting for all&#39;;
          $data[&#39;file_path&#39;] = &#39;&#39;;
        }
    }
    header(&#39;Content-type: application/json&#39;);
    echo json_encode($data);
  }
   
  //建立上传文件夹
  private function touchDir(){
    if(!file_exists($this->filepath)){
      return mkdir($this->filepath);
    }
  }
  
  private function createName($fileName, $md5FileName){
     return $md5FileName . &#39;.&#39; . pathinfo($fileName)[&#39;extension&#39;];
  }
}
 
//实例化并获取系统变量传参
$upload = new Upload($_FILES[&#39;file&#39;][&#39;tmp_name&#39;],$_POST[&#39;blob_num&#39;],$_POST[&#39;total_blob_num&#39;],$_POST[&#39;file_name&#39;],$_POST[&#39;md5_file_name&#39;]);
//调用方法，返回结果
$upload->apiReturn();

Verwenden Sie das jQuery-Plugin, um Dateien ohne Aktualisierung hochzuladen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen aktualisierungsfreien Upload in PHP und HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html5 jquery
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist der Unterschied zwischen new self() und new static() in PHP?Nächster Artikel：Was ist der Unterschied zwischen new self() und new static() in PHP?

In Verbindung stehende Artikel

Mehr sehen