PHP Ajax实现上传文件进度条动态显示进度功能

说个前提：PHP配置文件中规定默认上传文件大小限制2M以下，如需上传大文件需同时更改php.ini中的上传最大文件大小和最大执行时间以及post_max_size的值。

主界面以及埃阿斯实现：index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title上传文件/title脚本类型=' text/JavaScript ' function sub(){ var obj=new XMLHttpRequest()；物体。onreadystatechange=function(){ if(obj。状态==200 obj。readystate==4){ document。getelementbyid(' con ').innerHTML=obj.responseText} } //通过埃阿斯对象的上传属性的进度事件感知当前文件上传状态物体。上传。onprogress=function(evt){//上传附件大小的百分比var per=数学。楼层(((evt。已加载/evt。总计)* 100)' % '；//当上传文件时显示进度条文件。getelementbyid(' parent ')。风格。display=' block//通过上传百分比设置进度条样式的宽度文件。getelementbyid(' son ')。风格。width=per//在进度条上显示上传的进度值document.getElementById('son ').innerHTML=per} //通过上传收集零散的文件上传信息var FM=文档。getelementbyid(' userfile 3 ').文件[0];var FD=new FormData()；fd.append('userfile '，fm)；obj.open('post '，'上传。PHP’)；物体。发送(FD)；}/脚本样式类型=' text/CSS ' # parent { width : 200 px；高： 20pxborder: 2px纯灰色；背景：浅灰色；显示器：无；} # son { width : 0；高度： 100%;背景：浅绿色；文本对齐：中心；} /style /head body h2Ajax实现进度条文件上传/H2 div id='父' div id='子'/div/div p id=' con '/p输入类型=' file ' name=' user file ' id=' user file 3 ' brbr输入类型='button '名称='btn '值='文件上传onclick='sub()' /body /html php处理上传文件：upload.php

？php /上传文件进行简单错误过滤if($ _ FILES[' user FIle '][' error ']0){ exit('上传文件有错$ _ FIles[' user FIle '][' error '])；} //定义存放上传文件的真实路径$path=' ./upload/'；//定义存放上传文件的真实路径名字$ name=$ _ FILES[' user FIle '][' name ']；//将文件的名字的字符编码从UTF-8转成GB2312 $name=iconv('UTF-8 '，' GB2312 '，$ name)；//将上传文件移动到指定目录文件中if(move _ uploaded _ FIles($ _ FIles[' user FIle '][' tmp _ name ']，$path .$name)) { echo '文件上传成功；} else { echo '文件上传失败；} ?总结

以上所述是小编给大家介绍的网站开发工程师实现上传文件进度条动态显示进度功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！