PHP用进度条实现Ajax文件上传功能示例

本文展示了PHP如何用进度条上传Ajax文件。分享给大家参考，如下：

我分享了一篇关于php使用FileApi上传Ajax文件的文章，其中上传Ajax文件时没有进度条。今天，我分享了一篇关于上传带有进度条的Ajax文件的文章。

渲染：

项目结构图：

12-progress-upload.html文件：

页面中主要有一个上传文件控件，在选择文件时响应selfile()方法，然后通过js读取上传文件，创建FormData对象和xhr对象，并使用xhr2的新标准编写一个monitor上传进程函数来请求11-fileApi.php文件。

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' Title htm 5带有进度条的上传函数/Title link rel='样式表' href='脚本函数self file(){//js读取上传的文件varfile=document . getelementsbyname(' input ')[0]。文件[0]；//创建FormData对象var FD=new FormData()；fd.append('pic '，文件)；//ajax上传文件var xhr=new XMLHttpRequest()；xhr.open('POST '，' 11-fileApi.php '，true)；//编写一个监听函数xhr . upload . onprogress=function(ev){ if(ev。length computable) {//xhr2文件长度可以计算为varpercent=100 * ev。已加载/ev。总计；//计算上传文档的百分比。getelementbyid ('bar ')。style.width=百分比“%”；//更改上传进度文档. getelementbyid ('bar ')。innerhtml=parseint(百分比)' % '；//显示上传进度} } xhr . send(FD)；//发送请求}/scriptstyle #进度{ width:500px高度：30 px；border:1px纯绿色；} # bar { width :0%；高度：100%；背景-颜色：绿色；}/style/headbody h1html5hupload函数，带有进度条/h1 div id=' progress ' div id=' bar '/div/div输入类型=' file ' name=' pic ' onchange=' selfile()；'//body/html11-fileApi.php文件：

首先判断文件是否上传，然后判断文件是否上传成功，最后将文件移动到当前目录下的上传目录，文件名不变。

？Php/** * fileApi实现Ajax上传文件* @ AuthorWebBC */if(空($ _ files)) {exit('无文件')；}if($_FILES['pic']['error']！==0){ exit(' fail ')；} move _ uploaded _ FIles($ _ FILES[' pic '][' tmp _ name ']，'。/upload/'。$ _ FILES[' pic '][' name '])；更多对PHP相关内容感兴趣的读者可以查看本网站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP网络编程技巧总结》、0103010

希望本文对PHP编程有所帮助。