通过AJAX和formdata对象上传文件

2022-08-16 08:07:54
681次星辉

AJAX 的引入标志着 Web 历史上的巨大飞跃。无需重新加载页面即可与 Web 服务器通信的能力彻底改变了 Web 应用程序的构建方式。自从动态网站的最初概念以来，启用 AJAX (XMLHttpRequests) 的主要技术已经有了显着的发展。

支持通过XMLHttpRequestAJAX 上传文件。例如通过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或字符串。

// Files
formData.append(name, file, filename);
// Blobs
formData.append(name, blob, filename);
// Strings
formData.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。