php 使用html5 XHR2 上传文件进度显示 - 怀素真

公告

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

posted on 2017-01-17 20:08 怀素真阅读(552) 评论(0) 编辑收藏举报

刷新页面返回顶部