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從元素中檢索 并將其存儲在變量中。您可以通過訪問該files屬性來執(zhí)行此操作。

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

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

// 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ù)組中獲取當前文件，然后檢查以確保它是圖像。文件的type屬性將文件類型作為字符串返回。因此，您可以使用 JavaScriptmatch()方法來確保此字符串與所需類型匹配。如果文件類型不匹配，則通過調(diào)用跳過該文件continue。

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

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

// FilesformData.append(name, file, filename);// BlobsformData.append(name, blob, filename);// StringsformData.append(name, value);

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

第 4 步：與服務器通信

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

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

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

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

接下來，您需要設置一個事件偵聽器，該偵聽器將在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和formdata對象上傳文件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！