php 使用html5 XHR2实现上传文件与进度显示功能示例


Posted in PHP onMarch 03, 2020

本文实例讲述了php 使用html5 XHR2实现上传文件与进度显示功能。分享给大家供大家参考,具体如下:

思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了。

在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息。

它分成上传和下载两种情况

1.下载的progress事件属于XMLHttpRequest对象
2.上传的progress事件属于XMLHttpRequest.upload对象。

与progress事件相关的,还有其他五个事件:

1.load事件:传输成功完成。
2.abort事件:传输被用户取消。
3.error事件:传输中出现错误。
4.loadstart事件:传输开始。
5.loadEnd事件:传输结束,但是不知道成功还是失败。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm">
    <input type="file" name="file" id="upfile" />
    <input type="submit" name="submit" value="提交" />
  </form>
  <div id="upStatus"></div>
</body>
<script type="text/javascript">
  var myForm = document.getElementById("myForm");
  var upfile = document.getElementById("upfile");

  myForm.onsubmit = function() {
    //我们创建一个FormData对象
    var fd = new FormData();
    var file = upfile.files[0];
    //把文件添加到FormData对象中
    fd.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        alert(this.responseText);
      }
    };
    xhr.open("post", "upfile.php", true);

    //监听上传事件
    xhr.upload.onprogress = function(ev) {
      //如果长度是可计算的
      if(ev.lengthComputable) {
        var percent = Math.round((ev.loaded / ev.total) * 100);
        document.getElementById("upStatus").innerHTML = percent + "%";
      }
    };

    //发送FormData对象
    xhr.send(fd);
    return false;
  };
</script>
</html>

upfile.php代码如下:

<?php
$uploadDir = './upload/';
if(!file_exists($uploadDir)) {
  @mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
  echo "OK";
} else {
  echo "NO";
}

如果上传过程中PHP出现如下信息:

Warning: POST Content-Length of 625523488 bytes exceeds the limit of 8388608 bytes in Unknown on line 0

说明文件大小超出了PHP设置限制,可以设置php.ini

;脚本解析输入数据(类似 POST 和 GET)允许的最大时间,单位是秒。

;它从接收所有数据到开始执行脚本进行测量的。
max_input_time = 60

;允许客户端单个POST请求发送的最大数据
post_max_size = 64M

;是否开启文件上传功能
file_uploads = On

;文件上传的临时存放目录(如果不指定,使用系统默认的临时目录)
;upload_tmp_dir =

;允许单个请求上传的最大文件大小
upload_max_filesize = 64M

;允许单个POST请求同时上传的最大文件数量
max_file_uploads = 20

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
PHP的面试题集,附我的答案和分析(一)
Nov 19 PHP
使用 eAccelerator加速PHP代码的目的
Mar 16 PHP
PHP对象Object的概念 介绍
Jun 14 PHP
VB中的RasEnumConnections函数返回632错误解决方法
Jul 29 PHP
PHP语法自动检查的Vim插件
Aug 11 PHP
PHP实现货币换算的方法
Nov 29 PHP
CI框架中site_url()和base_url()的区别
Jan 07 PHP
PHP微信开发之二维码生成类
Jun 26 PHP
再Docker中架设完整的WordPress站点全攻略
Jul 29 PHP
php处理json格式数据经典案例总结
May 19 PHP
Laravel5权限管理方法详解
Jul 26 PHP
PHP实现求解最长公共子串问题的方法
Nov 17 PHP
php+ajax实现文件切割上传功能示例
Mar 03 #PHP
php 输出缓冲 Output Control用法实例详解
Mar 03 #PHP
PHP 加密 Password Hashing API基础知识点
Mar 02 #PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
Mar 02 #PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
Mar 02 #PHP
让whoops帮我们告别ThinkPHP6的异常页面
Mar 02 #PHP
php高性能日志系统 seaslog 的安装与使用方法分析
Feb 29 #PHP
You might like
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
python计算N天之后日期的方法
2015/03/31 Python
python中xrange用法分析
2015/04/15 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
使用Python生成XML的方法实例
2017/03/21 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python grpc超时机制代码示例
2020/09/14 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
趣味运动会活动方案
2014/02/12 职场文书
项目建议书怎么写
2014/05/15 职场文书
小学庆六一活动总结
2014/08/28 职场文书
考试作弊检讨
2015/01/27 职场文书
法院个人总结
2015/03/03 职场文书
男生贾里读书笔记
2015/06/30 职场文书
高中运动会前导词
2015/07/20 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python