PHP+Ajax implémente la fonction d'affichage dynamique de la progression de la barre de progression du fichier de téléchargement-tutoriel php-php.cn

PHP+Ajax implémente la fonction d'affichage dynamique de la progression de la barre de progression du fichier de téléchargement

不言

Libérer： 2023-03-29 16:56:01

original

1850 Les gens l'ont consulté

Cet article présente principalement PHP+Ajax pour réaliser la fonction d'affichage dynamique de la progression de la barre de progression du fichier téléchargé, en réalisant l'interface principale via ajax et en traitant les fichiers téléchargés par PHP. Jetons un coup d'œil à l'exemple de code spécifique

En principe : le fichier de configuration PHP stipule que la limite de taille de fichier de téléchargement par défaut est inférieure à 2 Mo. Si vous devez télécharger des fichiers volumineux, vous devez modifier les valeurs. de

, upload_max_filesize et max_execution_time dans php.ini en même temps. post_max_size

Interface principale et implémentation Ajax : index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>上传文件</title> 
  <script type="text/javascript"> 
    function sub() { 
      var obj = new XMLHttpRequest(); 
      obj.onreadystatechange = function() { 
        if (obj.status == 200 && obj.readyState == 4) { 
          document.getElementById(&#39;con&#39;).innerHTML = obj.responseText; 
        } 
      } 
      // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态 
      obj.upload.onprogress = function(evt) { 
        // 上传附件大小的百分比 
        var per = Math.floor((evt.loaded / evt.total) * 100) + "%"; 
        // 当上传文件时显示进度条 
        document.getElementById(&#39;parent&#39;).style.display = &#39;block&#39;; 
        // 通过上传百分比设置进度条样式的宽度 
        document.getElementById(&#39;son&#39;).style.width = per; 
        // 在进度条上显示上传的进度值 
        document.getElementById(&#39;son&#39;).innerHTML = per; 
      } 
      // 通过FormData收集零散的文件上传信息 
      var fm = document.getElementById(&#39;userfile3&#39;).files[0]; 
      var fd = new FormData(); 
      fd.append(&#39;userfile&#39;, fm); 
      obj.open("post", "upload.php"); 
      obj.send(fd); 
    } 
  </script> 
  <style type="text/css"> 
    #parent { 
      width: 200px; 
      height: 20px; 
      border: 2px solid gray; 
      background: lightgray; 
      display: none; 
    } 
    #son { 
      width: 0; 
      height: 100%; 
      background: lightgreen; 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <h2>Ajax实现进度条文件上传</h2> 
  <p id="parent"> 
    <p id="son"></p> 
  </p> 
  <p id="con"></p> 
  <input type="file" name="userfile" id="userfile3"><br><br> 
  <input type="button" name="btn" value="文件上传" onclick="sub()"> 
</body> 
</html>

Copier après la connexion

Traitement php des fichiers téléchargés : upload.php

<?php  
  // 上传文件进行简单错误过滤 
  if ($_FILES[&#39;userfile&#39;][&#39;error&#39;] > 0) { 
    exit("上传文件有错".$_FILES[&#39;userfile&#39;][&#39;error&#39;]); 
  } 
  // 定义存放上传文件的真实路径 
  $path = &#39;./upload/&#39;; 
  // 定义存放上传文件的真实路径名字 
  $name = $_FILES[&#39;userfile&#39;][&#39;name&#39;]; 
  // 将文件的名字的字符编码从UTF-8转成GB2312 
  $name = iconv("UTF-8", "GB2312", $name); 
  // 将上传文件移动到指定目录文件中 
  if (move_uploaded_file($_FILES[&#39;userfile&#39;][&#39;tmp_name&#39;], $path.$name)) { 
    echo "文件上传成功"; 
  } else { 
    echo "文件上传失败"; 
  } 
 ?>

Copier après la connexion

Recommandations associées :

Explication détaillée des méthodes et exemples de PHP+Ajax pour implémenter une pagination sans actualisation

Explication détaillée des exemples de php+ajax pour implémenter la fonction de téléchargement d'image avec progression bar

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

PHP+Ajax implémente la fonction d'affichage dynamique de la progression de la barre de progression du fichier de téléchargement