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 选择器）。这是非标准的，应该谨慎使用。 |
