当前位置：首页 → php教程>php使用html5 XHR2实现上传文件与进度显示功能示例

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

时间：2021-01-11

来源：互联网

在手机上看

手机扫描阅读

本文主要讲述了php使用html5 XHR2实现上传文件与进度显示功能感兴趣的朋友快来php爱好者看看吧。

u=775033390,4171863621&fm=26&gp=0.jpg

本文实例讲述了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>

<head>

</head>

<body>

</form>

</body>

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中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
阅读：21
PHP中那些常用的魔术常量
阅读：23
win10下php安装seaslog扩展的详细步骤
阅读：19
PHP实现腾讯短网址生成api接口讲解
阅读：24
打包vue.js项目方法教程
阅读：23
php数据结构之顺序链表与链式线性表示例
阅读：27
php使用number_format函数截取小数的方法分析
阅读：21
mysql-建表、添加字段、修改字段、添加索引SQL语句写法
阅读：30
PHP实现无限极分类的两种方式示例递归和引用方式
阅读：27
如何用php实现像JSP,ASP里Application那样的全局变量
阅读：21

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

今日更新

热门下载