共计 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。
// Send the Data.xhr.send(formData);
“怎么通过 AJAX 和 formdata 对象上传文件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注丸趣 TV 网站,丸趣 TV 小编将为大家输出更多高质量的实用文章!