怎么通過AJAX和formdata對象上傳文件

163次閱讀

共計 2707 個字符，預計需要花費 7 分鐘才能閱讀完成。

本篇內容介紹了“怎么通過 AJAX 和 formdata 對象上傳文件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓丸趣 TV 小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

第 1 步：制作上傳表單

您需要做的第一件事是構建允許用戶選擇要上傳的文件的 HTML 表單。為了簡單起見，讓我們使用 input 帶有類型的標準元素 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 屬性。這將允許用戶從瀏覽器啟動的文件選擇器中選擇多個文件。如果您不指定此屬性，則用戶只能選擇一個文件。

現在您已經設置了 HTML 表單，讓我們看看處理文件上傳的 JavaScript 代碼。

第 2 步：上傳文件到服務器

首先，您需要創建三個變量來保存對 HTML 標記中的、和 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...}

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

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

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

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

然后創建一個新 FormData 對象。這用于構造形成 AJAX 請求的數據有效負載的鍵 / 值對。

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

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

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

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

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

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

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

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

第 4 步：與服務器通信

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

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

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

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

接下來，您需要設置一個事件偵聽器，該偵聽器將在 onload 事件觸發時觸發。檢查對象的 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! 
 }
};

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