怎么通過(guò)AJAX和formdata對(duì)象上傳文件

本篇內(nèi)容介紹了“怎么通過(guò)AJAX和formdata對(duì)象上傳文件”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

第 1 步：制作上傳表單

您需要做的第一件事是構(gòu)建允許用戶選擇要上傳的文件的HTML表單。為了簡(jiǎn)單起見，讓我們使用<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>

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

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

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

首先，您需要?jiǎng)?chuàng)建三個(gè)變量來(lái)保存對(duì)HTML 標(biāo)記中的 、 和<form>元素的引用<input>。<button>

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

接下來(lái)，您需要將事件偵聽器附加到表單的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 處理文件上傳。

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

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

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

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

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

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

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

// 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()方法來(lái)確保此字符串與所需類型匹配。如果文件類型不匹配，則通過(guò)調(diào)用跳過(guò)該文件continue。

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

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

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

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

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

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

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

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

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

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

// 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ā)送請(qǐng)求。將對(duì)象傳遞給formData對(duì)象上send可用的方法xhr。

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

“怎么通過(guò)AJAX和formdata對(duì)象上傳文件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！