php使用html5 XHR2如何实现上传文件与进度显示功能
创始人
2024-12-05 22:41:25
0次

具体如下:

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

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

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

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

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

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




  
  


  
    
    
  
  
  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;   };

upfile.php代码如下:

如果上传过程中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开发环境搭建工具有哪些

一、phpStudy,是一个新手入门最常用的开发环境。二、WampServer,WampServer也同样的也是和phpStudy一样操作简单对小白比较友好。三、XAMPP,XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包;四、MAMP,MAMP分为两种MAMP和MAMP Pro for Mac。五、宝塔面板,宝塔面板是一款服务器管理软件,支持windows和linux系统。六、UPUPW,UPUPW是目前Windows平台下最具特色的Web服务器PHP套件。

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...