Maison >développement back-end >tutoriel php >PHP+Ajax implémente la fonction d'affichage dynamique de la progression de la barre de progression du fichier de téléchargement

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

不言original: 2018-06-04 10:20:261935parcourir

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>

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 "文件上传失败"; 
  } 
 ?>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explications détaillées et exemples de diverses méthodes de lecture de fichiers volumineux en PHPArticle suivant：Explications détaillées et exemples de diverses méthodes de lecture de fichiers volumineux en PHP

Articles Liés

Voir plus