常用属性

使用input进行文件上传时，一般标签可以写成这样（以上传图片为例）：

1
2
3
4
5
6
7
<input
  type="file"
  id="filePicker"
  onchange="onFileChange"
  accept="image/png, image/jpg, image/jpeg"
  multiple
>

上面的HTML代码表示上传格式为png或者jpg格式的图片，并且允许同时上传多张；

input标签的各个属性的用法：

  • accept： 该属性为一个字符串，它定义了文件 input 应该接受的文件类型，一般不同类型用都好分隔：
    • 一个以英文句号（”.“）开头的合法的不区分大小写的文件名扩展名。例如： .jpg，.pdf 或 .doc；
    • 一个不带扩展名的 MIME 类型字符串；
    • 字符串 audio/*， 表示“任何音频文件”；
    • 字符串 video/*，表示 “任何视频文件”；
    • 字符串 image/*，表示 “任何图片文件”。
  • capture：该属性为一个字符串，如果 accept属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头获取这些数据。值为user表示使用前置摄像头和/或麦克风，environment表示使用后置摄像头和/或麦克风，如果没有该属性，则 user agent自由决定；
  • files：要上传的文件对象（FileList），如果指定了multiple，则有多个成员；
  • multiple：当写上该属性时，表示input允许用户选择多个文件；
  • webkitdirectory：布尔值，如果出现，表示在文件选择器界面用户只能选择目录。

获取的文件信息

被选择的文件可以使用 HTMLInputElement.files 属性返回文件信息，它返回一个类数组对象FileList，所以可以使用length属性来获得已选择的文件数量。

每个File包含下列信息：

  • name：文件名；
  • lastModified：指定文件最后一次修改的日期和时间；
  • lastModifiedDate：已弃用；
  • size：以字节数为单位的文件大小；
  • type：文件的 MIME 类型；
  • webkitRelativePath：一个字符串，指定了相对于在目录选择器中选择的基本目录的文件路径（慎用）。

一个例子

html

1
2
3
4
5
6
7
<input
  type="file"
  id="filePicker"
  onchange="onFileChange"
  accept="image/png, image/jpg, image/jpeg"
  multiple
>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const onFileChange = (e) => {
  const files = e.target.files;

  if (files) {
    if (files.length === 0) {
      // 单个文件
      const file = files[0];

      // 图片类型的文件，可以获取到用于预览的链接
      const preview_src = URL.createObjectURL(file);

      const type = file.type // image/png
      const size = file.size // 238899
      const name = file.name // avatar.png
      const lastModified = file.lastModified // 1604299166213

      const form = new FormData();

      form.append(file.name, file);

      onUpload(form);
    } else {
      // 多个文件
      for (const file of files) {
        const form = new FormData();

        form.append(file.name, file);

        onUpload(form);
        // 建议使用Promise.all
      }
    }
  } else {
    console.log('请选择文件');
  }
}

const onUpload = (form) => {
  ajax.post({
    type: 'POST',
    dataType: 'json',
    url: '',
    data: form,
    // ...
    success() {

    },
    fail() {

    }
  });
}