formdata多文件上传_如何使用FormData轻松上传单个或多个文件

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 (What's 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对象。

Vanilla JavaScript的文件上传示例 (File Upload Example with Vanilla JavaScript)

Let's now see a simple example of file upload using vanilla JavaScript, XMLHttpRequest and FormData.

现在,让我们看一个使用原始JavaScript, XMLHttpRequestFormData上传文件的简单示例。

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

identified by the app ID. Next, we include the index.js file using a

你可能感兴趣的:(数据结构,java,python,javascript,js)