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

79次阅读

共计 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。