formdata多文件上传
In this post, we'll learn about the FormData interface available in modern web browsers as a part of the HTML5 spec.
在本文中,我们将了解HTML5规范中现代Web浏览器中提供的FormData接口。
We'll see examples of using FormData with Ajax, Angular 7, Ionic and React.
我们将看到在Ajax,Angular 7,Ionic和React中使用FormData的示例。
FormData is simply a data structure that can be used to store key-value pairs. Just like its name suggests it's designed for holding forms data i.e you can use it with JavaScript to build an object that corresponds to an HTML form. It's mostly useful when you need to send form data to RESTful API endpoints, for example to upload single or multiple files using the XMLHttpRequest
interface, the fetch()
API or Axios.
FormData只是一个可用于存储键值对的数据结构。 就像它的名字暗示的那样,它是为保存表单数据而设计的,即,您可以将其与JavaScript一起使用以构建与HTML表单相对应的对象。 当您需要将表单数据发送到RESTful API端点时,例如,使用XMLHttpRequest
接口, fetch()
API或Axios上传单个或多个文件时,它最有用。
You can create a FormData object by instantiating the FormData interface using the new
operator as follows:
您可以通过使用new
运算符实例化FormData接口来创建FormData对象,如下所示:
const formData = new FormData()
The formData
reference refers to an instance of FormData. You can call many methods on the object to add and work with pairs of data. Each pair has a key and value.
formData
引用引用FormData的实例。 您可以在对象上调用许多方法来添加和使用数据对。 每对都有一个键和值。
These are the available methods on FormData objects:
这些是FormData对象上可用的方法:
append()
: used to append a key-value pair to the object. If the key already exists, the value is appended to the original value for that key,
append()
:用于将键值对附加到对象。 如果该键已经存在,则将值附加到该键的原始值,
delete()
: used to deletes a key-value pair,
delete()
:用于删除键值对,
entries()
: returns an Iterator object that you can use to loop through the list the key value pairs in the object,
entries()
:返回一个Iterator对象,您可以使用该对象遍历列表中的键值对,
get()
: used to return the value for a key. If multiple values are appended, it returns the first value,
get()
:用于返回键的值。 如果附加了多个值,它将返回第一个值,
getAll()
: used to return all the values for a specified key,
getAll()
:用于返回指定键的所有值,
has()
: used to check if there’s a key,
has()
:用于检查是否有钥匙,
keys()
: returns an Iterator object which you can use to list the available keys in the object,
keys()
:返回一个Iterator对象,您可以使用该对象列出该对象中的可用键,
set()
: used to add a value to the object, with the specified key. This is going to relace the value if a key already exists,
set()
:用于使用指定的键将值添加到对象。 如果一个键已经存在,这将增加值
values()
: returns an Iterator object for the values of the FormData object.
values()
:为FormData对象的值返回一个Iterator对象。
Let's now see a simple example of file upload using vanilla JavaScript, XMLHttpRequest
and FormData
.
现在,让我们看一个使用原始JavaScript, XMLHttpRequest
和FormData
上传文件的简单示例。
Navigate to your working folder and create and index.html
file with the following content:
导航到您的工作文件夹,并创建包含以下内容的index.html
文件:
Parcel Sandbox
We simply create an HTML document with a 我们只需使用 Next, create the 接下来,创建 We first insert an 我们首先在HTML页面中插入 Next, we query for the file input element using the 接下来,我们使用 Next, we define the 接下来,我们定义 We use the append method of FormData to append the file, passed as a parameter to the 我们使用FormData的append方法将作为参数传递给 Next, we send the request using the 接下来,我们使用 After defining the 定义了 You can experiment with this example from this code sandbox: 您可以从以下代码沙箱中尝试以下示例: You can easily modify the code above to support multiple file uploading. 您可以轻松修改上面的代码以支持多个文件上传。 First, you need to add the 首先,您需要将 Now, you'll be able to select multiple files from your drive. 现在,您将能够从驱动器中选择多个文件。 Next, change the 接下来,更改 Finally, call the method with an array of files as argument: 最后,以文件数组作为参数调用该方法: Next, you can check out these advanced tutorials for how to use 接下来,您可以查看这些高级教程,了解如何将 How to Post FormData with Angular 7 如何使用Angular 7发布FormData React & Axios FormData React和Axios FormData Multiple File Upload with Ionic 4 & FormData 使用Ionic 4和FormData进行多文件上传 翻译自: https://www.freecodecamp.org/news/formdata-explained/ formdata多文件上传app
ID. Next, we include the index.js
file using a tag.
app
ID标识的标记包含
index.js
文件。
index.js
file and add following code:index.js
文件并添加以下代码: document.getElementById("app").innerHTML = `
File Upload & FormData Example
element in our HTML page. This will be used to select the file that we'll be uploading.
元素。 这将用于选择我们将要上传的文件。
querySelector()
method.querySelector()
方法查询文件输入元素。 uploadFile()
method in which we first declare an API_ENDPOINT
variable that holds the address of our file uploading endpoint. Next, we create an XMLHttpRequest
request and an empty FormData
object.uploadFile()
方法,在该方法中,我们首先声明一个API_ENDPOINT
变量,该变量保存文件上传端点的地址。 接下来,我们创建一个XMLHttpRequest
请求和一个空的FormData
对象。 uploadFile()
method, to the file
key. This will create a key-value pair with file
as a key and the content of the passed file as a value.uploadFile()
方法的文件附加到file
密钥。 这将创建一个以file
为键的键-值对,并以传递的文件的内容为值。 send()
method of XMLHttpRequest
and we pass in the FormData
object as an argument.XMLHttpRequest
的send()
方法发送请求,并传入FormData
对象作为参数。 uploadFile()
method, we listen for the change event on the element and we call the
uploadFile()
method with the selected file as an argument. The file is accessed from event.target.files
array.uploadFile()
方法之后,我们侦听元素上的change事件,并以所选文件作为参数调用
uploadFile()
方法。 该文件是从event.target.files
数组访问的。 上载多个文件 (Uploading Multiple Files)
multiple
property to the element:
multiple
属性添加到元素:
uploadFile()
method to accept an array of files as an argument and simply loop through the array and append the files to the FormData
object:uploadFile()
方法以接受文件数组作为参数,并简单地循环遍历该数组并将文件附加到FormData
对象: const uploadFile = (files) => {
console.log("Uploading file...");
const API_ENDPOINT = "https://file.io";
const request = new XMLHttpRequest();
const formData = new FormData();
request.open("POST", API_ENDPOINT, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
};
for (let i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i])
}
request.send(formData);
};
fileInput.addEventListener("change", event => {
const files = event.target.files;
uploadFile(files);
});
FormData
with Angular, Ionic and React:FormData
与Angular,Ionic和React结合使用: