AJAX 的引入標(biāo)志著 Web 歷史上的巨大飛躍。無需重新加載頁面即可與 Web 服務(wù)器通信的能力徹底改變了 Web 應(yīng)用程序的構(gòu)建方式。自從動態(tài)網(wǎng)站的最初概念以來，啟用 AJAX (XMLHttpRequests) 的主要技術(shù)已經(jīng)有了顯著的發(fā)展。

支持通過XMLHttpRequestAJAX 上傳文件。例如通過FormData對象，但不幸的是舊瀏覽器不支持它。

第 1 步：制作上傳表單

您需要做的第一件事是構(gòu)建允許用戶選擇要上傳的文件的 HTML 表單。為了簡單起見，讓我們使用<input>帶有類型的標(biāo)準(zhǔn)元素file。

<form id="file-form" action="handler.php" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>

請注意，該<input>元素包含該multiple屬性。這將允許用戶從瀏覽器啟動的文件選擇器中選擇多個文件。如果您不指定此屬性，則用戶只能選擇一個文件。

現(xiàn)在您已經(jīng)設(shè)置了 HTML 表單，讓我們看看處理文件上傳的 JavaScript 代碼。

第2步：上傳文件到服務(wù)器

首先，您需要創(chuàng)建三個變量來保存對HTML 標(biāo)記中的 、 和<form>元素的引用<input>。<button>

var form = document.getElementById('file-form');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');

接下來，您需要將事件偵聽器附加到表單的onsubmit事件。

form.onsubmit = function(event) {
  event.preventDefault(); 
  // Update button text.
  uploadButton.innerHTML = 'Uploading...'; 
  // The rest of the code will go here...
}

在事件偵聽器中，您首先調(diào)用event.preventDefault()以阻止瀏覽器提交表單，從而允許我們使用 AJAX 處理文件上傳。

接下來，您將uploadButton'innerHTML屬性更新為Uploading..... 這只是向用戶提供一些反饋，以便他們知道文件正在上傳。

您的下一個工作是FileList從<input>元素中檢索 并將其存儲在變量中。您可以通過訪問該files屬性來執(zhí)行此操作。

// Get the selected files from the input.
var files = fileSelect.files;

然后創(chuàng)建一個新FormData對象。這用于構(gòu)造形成 AJAX 請求的數(shù)據(jù)有效負(fù)載的鍵/值對。

// Create a new FormData object.
var formData = new FormData();

第 3 步：從輸入中檢索文件

您的下一個工作是遍歷files數(shù)組中的每個文件并將它們添加到formData您剛剛創(chuàng)建的對象中。您還需要檢查用戶是否選擇了您期望的文件類型。

// Loop through each of the selected files.
 for (var i = 0; i < files.length; i++) {
   var file = files[i]; 
   // Check the file type.
   if (!file.type.match('image.*')) {
     continue;
   } 
   // Add the file to the request.
  formData.append('photos[]', file, file.name);
 }

在這里，您首先從files數(shù)組中獲取當(dāng)前文件，然后檢查以確保它是圖像。文件的type屬性將文件類型作為字符串返回。因此，您可以使用 JavaScriptmatch()方法來確保此字符串與所需類型匹配。如果文件類型不匹配，則通過調(diào)用跳過該文件continue。

然后，您使用對象append上的方法formData將此文件添加到數(shù)據(jù)有效負(fù)載中。

該FormData.append()方法用于處理文件、Blob或字符串。

// Files
formData.append(name, file, filename);
// Blobs
formData.append(name, blob, filename);
// Strings
formData.append(name, value);    

第一個參數(shù)指定name數(shù)據(jù)條目的類型。這將key在數(shù)??據(jù)有效負(fù)載中形成。第二個參數(shù)指定將用作數(shù)據(jù)條目的File、Blob或。附加 a or時，您也可以指定 a ，但這不是必需的。StringvalueFileBlobfilename

第 4 步：與服務(wù)器通信

接下來，您需要設(shè)置XMLHttpRequest負(fù)責(zé)與服務(wù)器通信的那個。為此，您首先需要創(chuàng)建一個新XMLHttpRequest對象。

// Set up the request.
var xhr = new XMLHttpRequest();

您現(xiàn)在需要創(chuàng)建到服務(wù)器的新連接。您可以使用該open方法執(zhí)行此操作。該方法采用三個參數(shù)。HTTP method，url將處理請求的 ，以及確定是否應(yīng)異步處理請求的布爾值。

// Open the connection.
xhr.open('POST', 'handler.php', true);

接下來，您需要設(shè)置一個事件偵聽器，該偵聽器將在onload事件觸發(fā)時觸發(fā)。檢查對象的status屬性xhr將告訴您請求是否成功完成。

// Set up a handler for when the request finishes.
xhr.onload = function () {
  if (xhr.status === 200) {
    // File(s) uploaded.
    uploadButton.innerHTML = 'Upload';
  } else {
    alert('An error occurred!');
  }
};

現(xiàn)在剩下要做的就是發(fā)送請求。將對象傳遞給formData對象上send可用的方法xhr。

// Send the Data.
xhr.send(formData);

這就是開始使用 AJAX 上傳文件所需要知道的一切。您的服務(wù)器端代碼需要從請求中提取文件并根據(jù)需要處理它們。如果大家想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點(diǎn)的AJAX教程，里面有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助。