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

 更新时间:2018年06月04日 09:51:11   作者:地雷0  
这篇文章主要介绍了PHP+Ajax实现上传文件进度条动态显示进度功能,通过ajax实现主界面,php处理上传文件,具体实例代码大家跟随脚本之家小编一起看看吧

说个前提: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实现上传文件进度条动态显示进度功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • thinkphp3.x中变量的获取和过滤方法详解

    thinkphp3.x中变量的获取和过滤方法详解

    这篇文章主要介绍了thinkphp3.x中变量的获取和过滤方法,结合实例分析了thinkPHP针对各种常见变量如get、post、cookie、session、URL等的获取及过滤等技巧,需要的朋友可以参考下
    2016-05-05
  • php生成图形(Libchart)实例

    php生成图形(Libchart)实例

    统计图形就我们会常到的数据图形了,如果三个数组以图形显示或楼盘以图形走向我们都会要用到图形,下面介绍一个php LIbchart图形生成类
    2013-11-11
  • Yii 2中的load()和save()示例详解

    Yii 2中的load()和save()示例详解

    这篇文章主要给大家介绍了关于Yii 2中的load()和save()的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用yii2具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
    2017-08-08
  • php制作的简单验证码识别代码

    php制作的简单验证码识别代码

    近期研究一些突破验证码方面的知识,记录下来。一方面算是对这几天学习知识的总结帮助自己理解;另一方面希望对研究这方面的技术同学有所帮助;另外也希望引起网站管理者的注意,在提供验证码时多些考虑进去。由于刚刚接触这方面的知识,理解比较浅显,有错误再所难免
    2016-01-01
  • php中url函数介绍及使用示例

    php中url函数介绍及使用示例

    本文主要介绍了PHP处理url字符串编码、解码与解析。下面进行详细的举例说明
    2014-02-02
  • php微信公众号开发之快递查询

    php微信公众号开发之快递查询

    这篇文章主要为大家详细介绍了php微信公众号开发之快递查询功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • ThinkPHP中图片按比例切割的代码实例

    ThinkPHP中图片按比例切割的代码实例

    今天小编就为大家分享一篇关于ThinkPHP中图片按比例切割的代码实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • 关于Laravel Route重定向的一个注意点

    关于Laravel Route重定向的一个注意点

    这篇文章主要给大家介绍了关于Laravel Route重定向的一个注意点,文中给出了详细的示例代码,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等

    Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等

    使用Yii2的时候,在某些场景和环境下需要获得Yii2目前所处于的module(模型)、Controller(控制器)、Action(方法),以及会调用控制器里面已经定义过的一些公共的方法等.对于这些问题Yii2可以在视图层View中使用$this->context这个对象去获得。下面通过示例代码给大家讲解下
    2017-03-03
  • Laravel 5框架学习之用户认证

    Laravel 5框架学习之用户认证

    本文给大家分享的是Laravel5框架中用户认证系统的使用方法,十分的详细,附上示例,推荐给小伙伴们,有需要的朋友可以参考下。
    2015-04-04

最新评论