溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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
一、phpStudy，是一個新手入門最常用的開發環境。二、WampServer，WampServer也同樣的也是和phpStudy一樣操作簡單對小白比較友好。三、XAMPP，XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包；四、MAMP，MAMP分為兩種MAMP和MAMP Pro for Mac。五、寶塔面板，寶塔面板是一款服務器管理軟件，支持windows和linux系統。六、UPUPW，UPUPW是目前Windows平臺下最具特色的Web服務器PHP套件。
感謝各位的閱讀！關于“php使用html5 XHR2如何實現上傳文件與進度顯示功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
