JavaScript 接收上傳文件

文件上傳是 Web 開發(fā)中常見的需求之一。當(dāng)用戶上傳文件到服務(wù)器時，你通常需要編寫代碼來處理這些上傳文件并執(zhí)行各種任務(wù)。本文將介紹如何使用 JavaScript 來接收上傳文件。

HTML 表單

在上傳文件之前，首先要編寫一個具有文件上傳功能的 HTML 表單。下面是一個簡單的例子：

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload File" name="submit">
</form>

該表單包含一個文件上傳輸入框和一個提交按鈕。在傳遞表單數(shù)據(jù)之前，一定要添加enctype="multipart/form-data"屬性以告訴瀏覽器上傳的數(shù)據(jù)可能包含文件。

文件對象

每當(dāng)用戶選擇一個文件并提交表單時，需要將 JavaScript 代碼編寫為在服務(wù)器上進(jìn)行處理。首先，可以使用 JavaScript 中的File對象來訪問上傳文件。每個File對象包含以下屬性：

• name：文件名。
• size：文件大小（以字節(jié)為單位）。
• type：文件類型（MIME 類型）。
• lastModified：文件上次修改時間。

下面是如何訪問上傳文件的示例代碼：

var input = document.getElementById("fileToUpload");
var file = input.files[0];
console.log(file.name);

在這段代碼中，可以首先使用getElementById方法獲取文件上傳表單元素，并通過files屬性訪問文件對象數(shù)組。由于每個文件上傳框只允許上傳單個文件，因此可以訪問文件對象數(shù)組的頭部并獲取第一個文件，如上例所示。

FormData 對象

雖然可以使用上述方法填充表單數(shù)據(jù)并將其發(fā)送到服務(wù)器，但有一個更好的解決方案可以處理上傳的文件和其他表單數(shù)據(jù)。可以使用 JavaScript 中的FormData對象，該對象是一個包含鍵值對的可追加表單數(shù)據(jù)的容器。除了文件之外，可以將文本和二進(jìn)制數(shù)據(jù)附加到FormData對象。下面是如何創(chuàng)建FormData對象并將文件添加到該對象的示例代碼：

var input = document.getElementById("fileToUpload");
var file = input.files[0];
var formData = new FormData();
formData.append("fileToUpload", file);
console.log(formData.get("fileToUpload"));

在這段代碼中，可以首先使用getElementById方法獲取文件上傳表單元素，并通過files屬性訪問文件對象數(shù)組。然后，可以創(chuàng)建一個FormData對象，并使用append方法將文件對象添加到其中。必須提供兩個參數(shù)：name和value，其中name是用于在服務(wù)器端訪問文件的名稱，而value則是上傳的文件對象。 可以使用get方法獲取添加的值。

XMLHttpRequest 對象

在創(chuàng)建包含已填充表單數(shù)據(jù)的FormData對象后，需要使用 JavaScript 中的XMLHttpRequest對象將數(shù)據(jù)發(fā)送到服務(wù)器。可以使用該對象的open和send方法發(fā)送 POST 請求，并控制請求標(biāo)頭的內(nèi)容和類型。以下是如何初始化XMLHttpRequest對象并將FormData對象發(fā)送到服務(wù)器的示例代碼：

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.onprogress = function(event) {
console.log(event.loaded);
};
xhr.send(formData);

在這段代碼中，可以首先創(chuàng)建一個XMLHttpRequest對象。然后使用open方法初始化 HTTP 請求。第一個參數(shù)指示請求的類型（GET、POST 等），第二個參數(shù)是請求的 URL，第三個參數(shù)告訴瀏覽器是否應(yīng)該執(zhí)行異步請求。

還可以設(shè)置upload屬性的onprogress事件來追蹤文件上傳的進(jìn)度。在本例中，可以使用console.log將結(jié)果輸出到控制臺，但可以使用其他方法來響應(yīng)上傳過程的不同階段。

在初始化請求之后，可以使用send方法將包含所有表單數(shù)據(jù)的FormData對象發(fā)送到服務(wù)器。

總結(jié)

使用 JavaScript 接收上傳文件并將其發(fā)送到服務(wù)器需要執(zhí)行以下步驟：

1. 創(chuàng)建包含文件上傳表單的 HTML 表單。
2. 在 JavaScript 中訪問上傳的文件對象。
3. 使用FormData對象將文件添加到表單數(shù)據(jù)中。
4. 使用XMLHttpRequest對象將表單數(shù)據(jù)發(fā)送到服務(wù)器。

完成這些步驟后，可以使用服務(wù)器端代碼解析上傳的數(shù)據(jù)和文件，檢查所需的條件并執(zhí)行所需的操作。