热搜词
PHP+Ajax实现上传文件进度条动态显示进度功能
灰儿 管理员 发消息 加好友 打招呼
发表于 2021-11-11 19:31:41 | 显示全部楼层 |阅读模式
说个前提：PHP配置文件中规定默认上传文件大小限制2M以下，如需上传大文件需同时更改php.ini中的upload_max_filesize和max_execution_time以及post_max_size的值。
01.png

主界面以及Ajax实现：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>上传文件</title>
  6.   <script type="text/javascript">
  7.     function sub() {
  8.       var obj = new XMLHttpRequest();
  9.       obj.onreadystatechange = function() {
  10.         if (obj.status == 200 && obj.readyState == 4) {
  11.           document.getElementById('con').innerHTML = obj.responseText;
  12.         }
  13.       }
  14.       // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态
  15.       obj.upload.onprogress = function(evt) {
  16.         // 上传附件大小的百分比
  17.         var per = Math.floor((evt.loaded / evt.total) * 100) + "%";
  18.         // 当上传文件时显示进度条
  19.         document.getElementById('parent').style.display = 'block';
  20.         // 通过上传百分比设置进度条样式的宽度
  21.         document.getElementById('son').style.width = per;
  22.         // 在进度条上显示上传的进度值
  23.         document.getElementById('son').innerHTML = per;
  24.       }
  25.       // 通过FormData收集零散的文件上传信息
  26.       var fm = document.getElementById('userfile3').files[0];
  27.       var fd = new FormData();
  28.       fd.append('userfile', fm);
  29.       obj.open("post", "upload.php");
  30.       obj.send(fd);
  31.     }
  32.   </script>
  33.   <style type="text/css">
  34.     #parent {
  35.       width: 200px;
  36.       height: 20px;
  37.       border: 2px solid gray;
  38.       background: lightgray;
  39.       display: none;
  40.     }
  41.     #son {
  42.       width: 0;
  43.       height: 100%;
  44.       background: lightgreen;
  45.       text-align: center;
  46.     }
  47.   </style>
  48. </head>
  49. <body>
  50.   <h2>Ajax实现进度条文件上传</h2>
  51.   <div id="parent">
  52.     <div id="son"></div>
  53.   </div>
  54.   <p id="con"></p>
  55.   <input type="file" name="userfile" id="userfile3"><br><br>
  56.   <input type="button" name="btn" value="文件上传" onclick="sub()">
  57. </body>
  58. </html>
复制代码

php处理上传文件：upload.php

  1. <?php  
  2.   // 上传文件进行简单错误过滤
  3.   if ($_FILES['userfile']['error'] > 0) {
  4.     exit("上传文件有错".$_FILES['userfile']['error']);
  5.   }
  6.   // 定义存放上传文件的真实路径
  7.   $path = './upload/';
  8.   // 定义存放上传文件的真实路径名字
  9.   $name = $_FILES['userfile']['name'];
  10.   // 将文件的名字的字符编码从UTF-8转成GB2312
  11.   $name = iconv("UTF-8", "GB2312", $name);
  12.   // 将上传文件移动到指定目录文件中
  13.   if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) {
  14.     echo "文件上传成功";
  15.   } else {
  16.     echo "文件上传失败";
  17.   }
  18. ?>
复制代码


回复

使用道具 举报

全部评论0
返回列表 发新帖
回复
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

发布新帖

本文内容不够精彩，我要自己发布

TA的新帖

QQ|Archiver|手机版|小黑屋|管理员之家 ( 苏ICP备2023053177号-2 )

GMT+8, 2024-11-24 19:46 , Processed in 0.188733 second(s), 25 queries .

Powered by Discuz! X3.5

Cpoyright © 2001-2024 Discuz! Team