要實現PHP上傳大文件的進度條,可以使用以下步驟:
enctype="multipart/form-data"
屬性,以允許上傳文件。<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="上傳" name="submit">
</form>
upload.php
),用于處理文件上傳。在腳本中,使用$_FILES
全局變量來訪問上傳的文件。$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {
echo "文件上傳成功";
} else {
echo "文件上傳失敗";
}
XMLHttpRequest
對象來發送異步請求,并通過onprogress
事件來更新進度條。同時,在PHP腳本中,通過檢查$_FILES["fileToUpload"]["error"]
來判斷上傳進度。<script>
function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + "% 上傳完成");
// 更新進度條
// document.getElementById("progressBar").style.width = percentComplete + "%";
}
};
xhr.open("POST", "upload.php", true);
var formData = new FormData();
formData.append("fileToUpload", fileInput.files[0]);
xhr.send(formData);
}
</script>
uploadFile()
函數,并將進度條的更新邏輯添加到onprogress
事件處理程序中。<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="button" value="上傳" name="submit" onclick="uploadFile()">
</form>
<!-- 進度條元素 -->
<!-- <div id="progressBar"></div> -->
這樣,當用戶選擇文件并點擊上傳按鈕時,文件將被上傳到服務器,并通過進度條顯示上傳進度。需要注意的是,進度條的樣式和更新邏輯需要根據具體的需求進行自定義。