本文實例講述了PHP實現(xiàn)帶進度條的Ajax文件上傳功能。分享給大家供大家參考，具體如下：
之前分享了一篇關于 php使用FileApi實現(xiàn)Ajax上傳文件 的文章，里面的Ajax文件上傳是不帶進度條的，今天分享一篇關于帶進度條的Ajax文件上傳文章。
效果圖：
項目結構圖：
12-progress-upload.html文件：
頁面中主要有一個上傳文件控件，有文件被選擇時響應selfile()方法，接著利用js讀取上傳文件、創(chuàng)建FormData對象和xhr對象，利用xhr2的新標準，寫一個監(jiān)聽上傳過程函數(shù)，請求11-fileApi.php文件。
!DOCTYPE html>
html>
head>
meta charset="utf-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
title>HTML5帶進度條的上傳功能/title>
link rel="stylesheet" href="">
script>
function selfile(){
//js讀取上傳文件
var file = document.getElementsByTagName('input')[0].files[0];
//創(chuàng)建FormData對象
var fd = new FormData();
fd.append('pic',file);
//ajax上傳文件
var xhr = new XMLHttpRequest();
xhr.open('POST','11-fileApi.php',true);
//利用xhr2的新標準，為上傳過程，寫一個監(jiān)聽函數(shù)
xhr.upload.onprogress = function(ev){
if(ev.lengthComputable){//文件長度可計算
var percent = 100*ev.loaded/ev.total;//計算上傳的百分比
document.getElementById('bar').style.width = percent + '%';//更改上傳進度
document.getElementById('bar').innerHTML = parseInt(percent)+'%';//顯示上傳進度
}
}
xhr.send(fd);//發(fā)送請求
}
/script>
style>
#progress{
width:500px;
height:30px;
border:1px solid green;
}
#bar{
width:0%;
height:100%;
background-color: green;
}
/style>
/head>
body>
h1>HTML5帶進度條的上傳功能/h1>
div id="progress">
div id="bar">/div>
/div>
input type="file" name="pic" onchange="selfile();" />
/body>
/html>
11-fileApi.php文件：
首先判斷是否有文件上傳，然后判斷文件上傳是否成功，最后移動文件至當前目錄下的upload目錄下，文件名不變。
?php
/**
* fileApi實現(xiàn)Ajax上傳文件
* @author webbc
*/
if(empty($_FILES)){
exit('no file');
}
if($_FILES['pic']['error'] !== 0){
exit('fail');
}
move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/'.$_FILES['pic']['name']);
?>
更多關于PHP相關內容感興趣的讀者可查看本站專題：《php文件操作總結》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結》、《PHP數(shù)據(jù)結構與算法教程》、《php程序設計算法總結》及《PHP網(wǎng)絡編程技巧總結》
希望本文所述對大家PHP程序設計有所幫助。
您可能感興趣的文章:- 基于jquery ajax的多文件上傳進度條過程解析
- 利用SpringMVC和Ajax實現(xiàn)文件上傳功能
- php+ajax 文件上傳代碼實例
- AjaxUpLoad.js實現(xiàn)文件上傳
- AjaxUpLoad.js實現(xiàn)文件上傳功能
- php+ajax實現(xiàn)無刷新文件上傳功能(ajaxuploadfile)
- ajaxFileupload實現(xiàn)多文件上傳功能
- AjaxFileUpload+Struts2實現(xiàn)多文件上傳功能
- AjaxFileUpload結合Struts2實現(xiàn)多文件上傳(動態(tài)添加文件上傳框)
- Ajax實現(xiàn)文件上傳功能(Spring MVC)
