一个小时带你总结前端上传文件的方法（整理分享）

项目中会有很多文件上传的需求，例如：头像上传、表格文件、word文档等…

上传必备表单元素：

进行文件上传的时候， 1.表单必须是post请求 2.表单必须声明不要对数据进行编码 - enctype=multipart/form-data

传送数据的格式就是键值对的形式，且数据都是js的数据类型，但文件进行传输的时候，只有两种形式去传输：

前后端混在一起开发

传统开发模式的上传需要将表单中选择的文件传送给后端，让后端做上传：

此时的表单中必须有enctype这个属性，这个属性的说明如下图：

点击上传按钮后，后端对文件进行上传处理，以php为例：

将文件保存到服务器中：

在实际开发中，为了提高效率，通常都会使用前后端分离开发。

前端做前端，后端做后端，最终使用接口文档对接 - 核心技术是 ajax

前后端分离开发，应用的主要技术就是ajax。上传同样可以使用ajax来上传。

FormData是js内置的一个构造函数，构造出来的对象可以识别文件信息。

使用方式：

构造FormData对象，将文件信息添加到FormData对象中，然后上传。

文件信息在文件选择控件中：表单.files

例：

FormData对象有一个特点，将文件信息添加进去后，直接打印不能看到文件信息，需要使用for of遍历才能看到：

FormData对象中也可以添加别的数据，进行一起提交：

从FormData对象中删除一个数据，使用：

有时候，我们在一个表单中需要上传多个文件，此时，FormData中可以不用追加一个文件信息，可以在构造FormData对象的时候，将整个表单对象传入，他会自动识别所有数据：

当使用FormData上传的时候，将FormData对象当做数据传入，不需要修改请求头，浏览器会自动修改。

此时已经实现了前后端分离上传了，但是正常项目中都会有一个预览图片的功能。

我们可以让后端在实现上传后，将上传以后的文件名称传送给前端，让前端渲染返回的图片路径。

但这样是在上传以后预览的，假设我们选择了文件以后，就想看看这个文件是否要上传，也就是在上传之前要预览的话，还是没有办法实现。

我们可以利用H5提供的FileReader来读取文件并预览，然后决定是否要上传。

ajax进行上传后