本文實(shí)例講述了php 使用html5 XHR2實(shí)現(xiàn)上傳文件與進(jìn)度顯示功能。分享給大家供大家參考，具體如下：
思路：只要我們知道上傳文件的總大小，還有上傳過(guò)程中上傳文件的大小，那么就可以實(shí)現(xiàn)進(jìn)度顯示了。
在html5中，XMLHttpRequest對(duì)象，傳送數(shù)據(jù)的時(shí)候，progress事件用來(lái)返回進(jìn)度信息。
它分成上傳和下載兩種情況
1.下載的progress事件屬于XMLHttpRequest對(duì)象
2.上傳的progress事件屬于XMLHttpRequest.upload對(duì)象。
與progress事件相關(guān)的，還有其他五個(gè)事件：
1.load事件：傳輸成功完成。
2.abort事件：傳輸被用戶取消。
3.error事件：傳輸中出現(xiàn)錯(cuò)誤。
4.loadstart事件：傳輸開始。
5.loadEnd事件：傳輸結(jié)束，但是不知道成功還是失敗。
!DOCTYPE HTML>
html lang="zh-CN">
head>
meta charset="UTF-8">
title>/title>
/head>
body>
form method="post" id="myForm">
input type="file" name="file" id="upfile" />
input type="submit" name="submit" value="提交" />
/form>
div id="upStatus">/div>
/body>
script type="text/javascript">
var myForm = document.getElementById("myForm");
var upfile = document.getElementById("upfile");
myForm.onsubmit = function() {
//我們創(chuàng)建一個(gè)FormData對(duì)象
var fd = new FormData();
var file = upfile.files[0];
//把文件添加到FormData對(duì)象中
fd.append("file", file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert(this.responseText);
}
};
xhr.open("post", "upfile.php", true);
//監(jiān)聽上傳事件
xhr.upload.onprogress = function(ev) {
//如果長(zhǎng)度是可計(jì)算的
if(ev.lengthComputable) {
var percent = Math.round((ev.loaded / ev.total) * 100);
document.getElementById("upStatus").innerHTML = percent + "%";
}
};
//發(fā)送FormData對(duì)象
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";
}
如果上傳過(guò)程中PHP出現(xiàn)如下信息：
Warning: POST Content-Length of 625523488 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
說(shuō)明文件大小超出了PHP設(shè)置限制，可以設(shè)置php.ini
;腳本解析輸入數(shù)據(jù)(類似 POST 和 GET)允許的最大時(shí)間，單位是秒。
;它從接收所有數(shù)據(jù)到開始執(zhí)行腳本進(jìn)行測(cè)量的。
max_input_time = 60
;允許客戶端單個(gè)POST請(qǐng)求發(fā)送的最大數(shù)據(jù)
post_max_size = 64M
;是否開啟文件上傳功能
file_uploads = On
;文件上傳的臨時(shí)存放目錄(如果不指定，使用系統(tǒng)默認(rèn)的臨時(shí)目錄)
;upload_tmp_dir =
;允許單個(gè)請(qǐng)求上傳的最大文件大小
upload_max_filesize = 64M
;允許單個(gè)POST請(qǐng)求同時(shí)上傳的最大文件數(shù)量
max_file_uploads = 20
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《php文件操作總結(jié)》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》及《PHP網(wǎng)絡(luò)編程技巧總結(jié)》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- php 下 html5 XHR2 + FormData + File API 上傳文件操作實(shí)例分析
- PHP使用HTML5 FileApi實(shí)現(xiàn)Ajax上傳文件功能示例
- php+html5實(shí)現(xiàn)無(wú)刷新圖片上傳教程
- 使用PHP和HTML5 FormData實(shí)現(xiàn)無(wú)刷新文件上傳教程
- php+html5+ajax實(shí)現(xiàn)上傳圖片的方法
- php+html5使用FormData對(duì)象提交表單及上傳圖片的方法
- php 使用html5實(shí)現(xiàn)多文件上傳實(shí)例
- PHP 文件上傳進(jìn)度條的兩種實(shí)現(xiàn)方法的代碼
- php實(shí)現(xiàn)簡(jiǎn)單的上傳進(jìn)度條
- php上傳文件并顯示上傳進(jìn)度的方法
- PHP+Ajax無(wú)刷新帶進(jìn)度條圖片上傳示例
- PHP+Ajax實(shí)現(xiàn)上傳文件進(jìn)度條動(dòng)態(tài)顯示進(jìn)度功能
