假設您有一個 HTML 元素 代表一個讓使用者選擇檔案的按鈕。點擊按鈕並選擇檔案後，其名稱儲存在 document.getElementById("image-file").value 中。如果伺服器支援 URL「/upload/image」處的多部分 POST 請求，那麼如何將檔案傳送到該端點？此外，如何監控上傳進度？
您可以使用fetch API 和可選的等待-try-catch 處理：
let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});此範例還包括作為以下方式發送的使用者資料JSON:
async function SavePhoto(inp) {
let user = { name: 'john', age: 34 };
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
const ctrl = new AbortController(); // for timeout
setTimeout(() => ctrl.abort(), 5000);
try {
let r = await fetch('/upload/image', {
method: "POST",
body: formData,
signal: ctrl.signal,
});
console.log('HTTP response code:', r.status);
} catch (e) {
console.log('Huston we have problem...:', e);
}
}遺憾的是，使用fetch 進行HTML5 檔案上傳不支援request.onprogress等方法，但您可以透過監聽網路事件來監控整體上傳進度:
let xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
let percentComplete = (e.loaded / e.total) * 100;
console.log('Upload progress:', percentComplete + '%');
}
});
xhr.open('POST', '/upload/image');
xhr.send(formData);以上是如何使用 JavaScript 將檔案傳送到伺服器並監控其上傳進度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
