input上传相关必备知识点 `<input type="file">`

input上传相关 知识点 <input type="file">

带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作。

属性	描述
值	value表示已选择文件的路径字符串
事件	change 和 input
支持的公共属性	required
附加属性	accept、capture 和 multiple
IDL 属性	files 和 value
DOM接口	HTMLInputElement
方法	select()

一、值

value为选择文件的路径，格式为字符串，默认为空串"",使用.value表示选中文件列表中的第一个。如果是开启multiple属性选择多个文件，可以通过ELEMENT节点.files来访问FileList

为了安全，值的路径显示为C:\fakepath\，而非真实路径

二、事件

当值发生改变时，触发这两个事件。input事件：输输入框内容发生改变时就会触发；change事件：输入框内容发生改变，并且输入框失去焦点时触发

三、附加属性

除了input公共方法，

1.accept

属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的唯一文件类型说明符列表（见下面）。

`<input type="file" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />`

2.capture

属性是一个字符串，如果 accept (en-US) 属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头去获取这些数据。不作展开

PS:唯一文件类型说明符列表

<input type="file" accept="image/*,.pdf" />

accept 属性的值是包含一个或多个（用逗号分隔）唯一文件类型说明符的字符串。例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF 文件，大概是这样的：

• 一个以英文句号（“.”）开头的合法的不区分大小写的文件名扩展名。例如：.jpg、.pdf 或 .doc。
• 一个不带扩展名的 MIME 类型字符串。
• 字符串 audio/*，表示“任何音频文件”。
• 字符串 video/*，表示“任何视频文件”。
• 字符串 image/*，表示“任何图片文件”。

3.multiple

开启后允许用户选择多个文件

四、IDL 属性（files 和 value）

1.files

被选择的文件以 HTMLInputElement.files 属性返回，它是包含一系列 File 对象的 FileList 对象。FileList是一个类数组对象，每个成员都是一个 File 实例。包含

所有现代浏览器中读写 HTMLInputElement.files 的值，不存在兼容性问题。

属性	描述
name	文件名。
lastModified	一个数字，指定文件最后一次修改的日期和时间，以Unix时间戳表示。
lastModifiedDate 已弃用	一个 Date 对象，表示文件最后一次修改的日期和时间。这被弃用，并且不应使用。使用 lastModified 作为替代。但是目前仍能访问
size	以字节数为单位的文件大小。
type	文件的 MIME 类型。
webkitRelativePath 非标准	一个字符串，指定了相对于在目录选择器中选择的基本目录的文件路径（即，一个设置了 webkitdirectory 属性的 file 选择器）。这是非标准的，应该谨慎使用。

2.value 同上面的 “值”