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从元素中检索 并将其存储在变量中。您可以通过访问该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对象上传文件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！