• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • File 对象

    File 对象代表一个文件,用来读写文件信息。它继承了 Blob 对象,或者说是一种特殊的 Blob 对象,所有可以使用 Blob 对象的场合都可以使用它。

    最常见的使用场合是表单的文件上传控件(<input type="file">),用户选中文件以后,浏览器就会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。

    // HTML 代码如下
    // <input id="fileItem" type="file">
    var file = document.getElementById('fileItem').files[0];
    file instanceof File // true
    

    上面代码中,file是用户选中的第一个文件,它是 File 的实例。

    构造函数

    浏览器原生提供一个File()构造函数,用来生成 File 实例对象。

    new File(array, name [, options])
    

    File()构造函数接受三个参数。

    • array:一个数组,成员可以是二进制对象或字符串,表示文件的内容。
    • name:字符串,表示文件名或文件路径。
    • options:配置对象,设置实例的属性。该参数可选。

    第三个参数配置对象,可以设置两个属性。

    • type:字符串,表示实例对象的 MIME 类型,默认值为空字符串。
    • lastModified:时间戳,表示上次修改的时间,默认为Date.now()

    下面是一个例子。

    var file = new File(
      ['foo'],
      'foo.txt',
      {
        type: 'text/plain',
      }
    );
    

    实例属性和实例方法

    File 对象有以下实例属性。

    • File.lastModified:最后修改时间
    • File.name:文件名或文件路径
    • File.size:文件大小(单位字节)
    • File.type:文件的 MIME 类型
    var myFile = new File([], 'file.bin', {
      lastModified: new Date(2018, 1, 1),
    });
    myFile.lastModified // 1517414400000
    myFile.name // "file.bin"
    myFile.size // 0
    myFile.type // ""
    

    上面代码中,由于myFile的内容为空,也没有设置 MIME 类型,所以size属性等于0,type属性等于空字符串。

    File 对象没有自己的实例方法,由于继承了 Blob 对象,因此可以使用 Blob 的实例方法slice()

    上篇:Blob 对象

    下篇:FileList 对象