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

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

成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護、網(wǎng)站設(shè)計制作、成都做網(wǎng)站、網(wǎng)站備案、服務器租用、空間域名、軟件開發(fā)、微信平臺小程序開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務，是一家有著豐富的互聯(lián)網(wǎng)運營推廣經(jīng)驗的科技公司，有著多年的網(wǎng)站建站經(jīng)驗，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個面向全國乃至全球的業(yè)務窗口：建站歡迎聯(lián)系：18982081108

第 1 步：制作上傳表單

您需要做的第一件事是構(gòu)建允許用戶選擇要上傳的文件的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屬性。這將允許用戶從瀏覽器啟動的文件選擇器中選擇多個文件。如果您不指定此屬性，則用戶只能選擇一個文件。

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

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

首先，您需要創(chuàng)建三個變量來保存對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...}

在事件偵聽器中，您首先調(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ù)有效負載的鍵/值對。

// 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 步：與服務器通信

接下來，您需要設(shè)置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);

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

分享題目：怎么通過AJAX和formdata對象上傳文件
網(wǎng)頁地址：http://muchs.cn/article46/ipjoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、動態(tài)網(wǎng)站、網(wǎng)站排名、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站