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

在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 使用html5 XHR2 上传文件 进度显示的更多相关文章

  1. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  2. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  3. ifrem上传文件后显示

    ifrem上传文件后显示 1.上传文件按钮    <a class="btn btn-primary pull-right" id="data-upload&quo ...

  4. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  5. C# 结合html5 批量上传文件和图片预览

    html5 新特性 <input id="imgsf" type="file" name="imgsf" multiple /> ...

  6. HTML5 读取上传文件（转载）

    另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象: <input type="file" id=&q ...

  7. ajax 上传文件，显示进度条，进度条100%，进度条隐藏，出现卡顿就隐藏进度条，显示正在加载，再显示上传完成

    <form id="uploadForm" method="post" enctype="multipart/form-data"&g ...

  8. PHP使用APC获取上传文件进度

    今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...

  9. 实践Html5的上传文件

    技术点: 1.通过input的change事件获取文件信息: onchange = function() { this.files } 这个files属性是htmlInputElement接口的属性, ...

随机推荐

  1. xgboost的遗传算法调参

    遗传算法适应度的选择: 机器学习的适应度可以是任何性能指标 —准确度,精确度,召回率,F1分数等等.根据适应度值,我们选择表现最佳的父母(“适者生存”),作为幸存的种群. 交配: 存活下来的群体中的父 ...

  2. iOS whose view is not in the window hierarchy!

    解决方法: viewController只Load完毕,没有Appear,此时应该将语句转移到ViewDidAppear方法中

  3. 第2课 C 到 C++ 的升级

    1.  C与C++的关系 (1)C++继承了所有的C特性,并在C的基础上提供了更多的语法和特性. (2)C++的设计目标是运行效率与开发效率的统一,它更强调的是语言的实用性. 2. C到C++ 的升级 ...

  4. 不设目标也能通关「马里奥」的AI算法，全靠好奇心学习

    在强化学习中,设计密集.定义良好的外部奖励是很困难的,并且通常不可扩展.通常增加内部奖励可以作为对此限制的补偿,OpenAI.CMU 在本研究中更近一步,提出了完全靠内部奖励即好奇心来训练智能体的方法 ...

  5. 阿里数据服务P6~P7晋升要点

    这是我在2015年高德负责P6晋升评审为团队成员准备的要点,整理下. 1. 数据仓库难点 1.1 分布式OLAP设计与选型 传统BI 友盟,Talking Data 启明星 keylin phonie ...

  6. django 更新 安装及原理

    Django框架简介 MVC框架和MTV框架(了解即可) MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图 ...

  7. Static / Const 的概念

    C/C++/Java Static / Const 的概念 这里以C为准,其他语言类似. Static变量是指分配不变(只可分配一次,以后再分配就无效了.)的变量 -- 它的存活寿命或伸展域可以贯穿程 ...

  8. Centos7修改profile错误导致命令行不能用，情况的解救方案,dir命令不能用

    Linux修改profile文件改错了,恢复的方法 Linux修改profile文件改错了,恢复的方法在改profile的时候,改出问题了,除了cd以外的命令基本都不能用了,连vi都不能用了,上网查了 ...

  9. 修改IP

    查看系统版本 [root@host ~]# cat /etc/issueCentOS release 6.5 (Final)Kernel \r on an \m [root@host ~]# cat ...

  10. Alpha版本检测报告

    1.Alpha版本测试报告 发布一篇随笔,作为项目的测试报告,内容包括: (1)测试计划 测试人员 工作安排 覃一霸 编写测试报告 张江波 执行测试.截图测试结果 测试功能 功能 描述 效果 结果 登 ...