PHP+Ajax实现上传文件进度条动态显示进度功能


Posted in PHP onJune 04, 2018

PHP+Ajax实现上传文件进度条动态显示进度功能

说个前提:PHP配置文件中规定默认上传文件大小限制2M以下,如需上传大文件需同时更改php.ini中的upload_max_filesizemax_execution_time以及post_max_size的值。

主界面以及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('con').innerHTML = obj.responseText; 
        } 
      } 
      // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态 
      obj.upload.onprogress = function(evt) { 
        // 上传附件大小的百分比 
        var per = Math.floor((evt.loaded / evt.total) * 100) + "%"; 
        // 当上传文件时显示进度条 
        document.getElementById('parent').style.display = 'block'; 
        // 通过上传百分比设置进度条样式的宽度 
        document.getElementById('son').style.width = per; 
        // 在进度条上显示上传的进度值 
        document.getElementById('son').innerHTML = per; 
      } 
      // 通过FormData收集零散的文件上传信息 
      var fm = document.getElementById('userfile3').files[0]; 
      var fd = new FormData(); 
      fd.append('userfile', 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> 
  <div id="parent"> 
    <div id="son"></div> 
  </div> 
  <p id="con"></p> 
  <input type="file" name="userfile" id="userfile3"><br><br> 
  <input type="button" name="btn" value="文件上传" onclick="sub()"> 
</body> 
</html>

php处理上传文件:upload.php

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

总结

以上所述是小编给大家介绍的PHP+Ajax实现上传文件进度条动态显示进度功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
PHP 开源AJAX框架14种
Aug 24 PHP
用PHP将数据导入到Foxmail的实现代码
Sep 05 PHP
PHP的PSR规范中文版
Sep 28 PHP
Codeigniter实现多文件上传并创建多个缩略图
Jun 12 PHP
PHP中的output_buffering详细介绍
Sep 27 PHP
php使用explode()函数将字符串拆分成数组的方法
Feb 17 PHP
微信公众平台开发实现2048游戏的方法
Apr 15 PHP
php实现的微信红包算法分析(非官方)
Sep 25 PHP
php ajax异步读取rss文档数据
Mar 29 PHP
php compact 通过变量创建数组
Nov 15 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
Mar 17 PHP
laravel-admin的多级联动方法
Sep 30 PHP
Laravel利用gulp如何构建前端资源详解
Jun 03 #PHP
PHP学习记录之数组函数
Jun 01 #PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
Jun 01 #PHP
PHP+MySQL实现模糊查询员工信息功能示例
Jun 01 #PHP
php post json参数的传递和接收处理方法
May 31 #PHP
PHP调用接口用post方法传送json数据的实例
May 31 #PHP
ThinkPHP5 验证器的具体使用
May 31 #PHP
You might like
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Vuejs实现购物车功能
2017/11/05 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python安装以及IDE的配置教程
2015/04/29 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
详解Python设计模式之策略模式
2020/06/15 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
社区工作感言
2014/02/21 职场文书
主题实践活动总结
2014/05/08 职场文书
个人整改方案范文
2014/10/25 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL