怎么通过AJAX和formdata对象上传文件

本篇内容介绍了“怎么通过AJAX和formdata对象上传文件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

第 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。

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

“怎么通过AJAX和formdata对象上传文件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！