本文實例講述了php 使用html5 XHR2實現上傳文件與進度顯示功能。分享給大家供大家參考，具體如下：
思路：只要我們知道上傳文件的總大小，還有上傳過程中上傳文件的大小，那么就可以實現進度顯示了。
在html5中，XMLHttpRequest對象，傳送數據的時候，progress事件用來返回進度信息。
它分成上傳和下載兩種情況
1.下載的progress事件屬于XMLHttpRequest對象
2.上傳的progress事件屬于XMLHttpRequest.upload對象。
與progress事件相關的，還有其他五個事件：
1.load事件：傳輸成功完成。
2.abort事件：傳輸被用戶取消。
3.error事件：傳輸中出現錯誤。
4.loadstart事件：傳輸開始。
5.loadEnd事件：傳輸結束，但是不知道成功還是失敗。
!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() {
//我們創建一個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;
};
/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";
}
如果上傳過程中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相關內容感興趣的讀者可查看本站專題：《php文件操作總結》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結》、《PHP數據結構與算法教程》、《php程序設計算法總結》及《PHP網絡編程技巧總結》
希望本文所述對大家PHP程序設計有所幫助。
您可能感興趣的文章:- php 下 html5 XHR2 + FormData + File API 上傳文件操作實例分析
- PHP使用HTML5 FileApi實現Ajax上傳文件功能示例
- php+html5實現無刷新圖片上傳教程
- 使用PHP和HTML5 FormData實現無刷新文件上傳教程
- php+html5+ajax實現上傳圖片的方法
- php+html5使用FormData對象提交表單及上傳圖片的方法
- php 使用html5實現多文件上傳實例
- PHP 文件上傳進度條的兩種實現方法的代碼
- php實現簡單的上傳進度條
- php上傳文件并顯示上傳進度的方法
- PHP+Ajax無刷新帶進度條圖片上傳示例
- PHP+Ajax實現上傳文件進度條動態顯示進度功能
