Comment implémenter le téléchargement sans actualisation en php et html5-tutoriel php-php.cn

Comment implémenter le téléchargement sans actualisation en php et html5

小云云

Libérer： 2023-03-22 21:24:02

original

1383 Les gens l'ont consulté

Cet article partage principalement avec vous la méthode d'implémentation du téléchargement sans actualisation en php et html5. Il partage principalement avec vous la méthode des images et des textes. J'espère qu'il pourra vous aider.

Adapté d'Internet ----->>>>>>>>>

Clarifiez votre pensée :

Introduit deux concepts : bloquer et fragmenter. Chaque bloc est composé d'une ou plusieurs tranches, et une ressource est composée d'un ou plusieurs blocs

Un bloc est une unité de stockage de données permanente côté serveur, et un slice est uniquement côté serveur. Elle est utilisée comme unité de stockage temporaire pendant le processus de téléchargement en plusieurs parties. Le serveur effacera périodiquement les éléments de données qui n'ont pas été fusionnés en blocs après le téléchargement dans environ un mois. Créez des ressources (mkfile).

Code frontal :

Code backend :

<!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>

Copier après la connexion

Recommandations associées :

Image de téléchargement jQuery sans plug-in d'actualisation

<?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();

Copier après la connexion

Utilisez le plug-in jQuery pour télécharger des fichiers sans partage de code d'actualisation

php pour télécharger des fichiers sans rafraîchir la page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!