PHP+Ajax implements the function of dynamically displaying the progress of the upload file progress bar-PHP Tutorial-php.cn

PHP+Ajax implements the function of dynamically displaying the progress of the upload file progress bar

不言

Release： 2023-03-29 16:56:01

Original

1904 people have browsed it

This article mainly introduces PHP Ajax to realize the function of dynamically displaying the progress of the uploaded file progress bar, realizing the main interface through ajax, and PHP processing uploaded files. Let's take a look at the specific example code

Let’s talk about the premise: the PHP configuration file stipulates that the default upload file size limit is less than 2M. If you need to upload large files, you need to change the upload_max_filesize and max_execution_time in php.ini at the same time. And the value of post_max_size.

Main interface and Ajax implementation: 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>

Copy after login

php handles uploaded files: 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 "文件上传失败"; 
  } 
 ?>

Copy after login

Related recommendations:

PHP Detailed explanation of methods and examples of Ajax implementation of non-refresh paging

php Ajax implementation of uploading images with progress bar detailed explanation of examples

The above is the detailed content of PHP+Ajax implements the function of dynamically displaying the progress of the upload file progress bar. For more information, please follow other related articles on the PHP Chinese website!