本文實例講述了php 使用html5 XHR2實現上傳文件與進度顯示功能。分享給大家供大家參考，具體如下：
思路：只要我們知道上傳文件的總大小，還有上傳過程中上傳文件的大小，那么就可以實現進度顯示了。
在html5中，XMLHttpRequest對象，傳送數據的時候，progress事件用來返回進度信息。
它分成上傳和下載兩種情況
1.下載的progress事件屬于XMLHttpRequest對象
2.上傳的progress事件屬于XMLHttpRequest.upload對象。
與progress事件相關的，還有其他五個事件：
1.load事件：傳輸成功完成。
2.abort事件：傳輸被用戶取消。
3.error事件：傳輸中出現錯誤。
4.loadstart事件：傳輸開始。
5.loadEnd事件：傳輸結束，但是不知道成功還是失敗。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!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代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
<?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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
;腳本解析輸入數據(類似 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程序設計有所幫助。
原文鏈接：https://www.cnblogs.com/jkko123/p/6294582.html
