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 文章调用类代码
Aug 11 PHP
PHP静态调用非静态方法的应用分析
May 02 PHP
PHP swfupload图片上传的实例代码
Sep 30 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
Dec 03 PHP
php采用session实现防止页面重复刷新
Dec 24 PHP
PHP实现linux命令tail -f
Feb 22 PHP
PHP会员找回密码功能的简单实现
Sep 05 PHP
php中让人头疼的浮点数运算分析
Oct 10 PHP
php简单读取.vcf格式文件的方法示例
Sep 02 PHP
thinkPHP5框架导出Excel文件简单操作示例
Aug 03 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
Oct 15 PHP
php上传后台无法收到数据解决方法
Oct 28 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脚本中include文件出错解决方法
2008/11/20 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python实现飞船大战
2020/04/24 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
大学生求职中的自我评价
2013/10/01 职场文书
西式婚礼证婚词
2014/01/12 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
证婚人致辞精选
2015/07/28 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python