suchen

Heim >Backend-Entwicklung >PHP-Tutorial >PHP + Ajax realisiert die Funktion der dynamischen Anzeige des Fortschritts des Fortschrittsbalkens der Upload-Datei

PHP + Ajax realisiert die Funktion der dynamischen Anzeige des Fortschritts des Fortschrittsbalkens der Upload-Datei

不言
不言Original
2018-06-04 10:20:261898Durchsuche

In diesem Artikel wird hauptsächlich PHP + Ajax vorgestellt, um die Funktion der dynamischen Anzeige des Fortschritts der hochgeladenen Datei zu realisieren, die Hauptschnittstelle über Ajax zu realisieren und einen Blick auf die PHP-Verarbeitung hochgeladener Dateien zu werfen

Als Voraussetzung: Die PHP-Konfigurationsdatei legt fest, dass die Standardgröße für Upload-Dateien weniger als 2 MB beträgt. Wenn Sie große Dateien hochladen müssen, müssen Sie die Werte ändern ​​von upload_max_filesize, max_execution_time und post_max_size gleichzeitig in php.ini.

Hauptschnittstelle und Ajax-Implementierung: 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>

php verarbeitet hochgeladene Dateien: 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 "文件上传失败"; 
  } 
 ?>

Verwandte Empfehlungen:

PHP +Ajax-Implementierung von Paging-Methoden ohne Aktualisierung und detaillierte Beispiele

PHP+Ajax-Implementierung des Hochladens von Bildern mit Fortschrittsbalken, detaillierte Beispiele

Das obige ist der detaillierte Inhalt vonPHP + Ajax realisiert die Funktion der dynamischen Anzeige des Fortschritts des Fortschrittsbalkens der Upload-Datei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Ausführliche Erklärungen und Beispiele verschiedener Methoden zum Lesen großer Dateien in PHPNächster Artikel：Ausführliche Erklärungen und Beispiele verschiedener Methoden zum Lesen großer Dateien in PHP

In Verbindung stehende Artikel

Mehr sehen