在web应用程序中使用文件

  • 选择本地文件并读取内容
  • 可以通过HTML中的 <input type="file"> 元素或者是通过拖拽来选择本地文件

选择文件

  1. inputDOM 的 files 属性,保存着选择的文件,是一个 Filelist 对象(对应多个文件, multiple),每一项都是一个 File
  2. 可以通过监听 inputDOM 的 change 事件,获取被选择的文件

获取文件信息

  1. File 对象的属性:name、size(byte)、type(MIME类型)
  2. 可以用来获取单个、多个文件大小
  3. 通过 click 方法使用隐藏的 file input 元素
    • input 设置 display: none, 再主动调用 input 的 click 事件
  4. 使用 label 元素来触发一个隐藏的 file input 元素
    1. input 元素不能使用 display: none(或 visibility: hidden)隐藏,否则 label 将无法通过键盘访问
    2. 使用 visually-hidden technique 作为替代
  5. 使用拖放来选择文件
    1. dropDOM.addEventListener('drop', function(e) {
        console.log('drop');
        e.stopPropagation();
        e.preventDefault();
        console.log(e);
        const dt = e.dataTransfer;
        const files = dt.files;
        console.log(files);
        }) ```
      
  6. 显示用户选择的图片的缩略图
    1. 将文件读取为 base64 格式,创建 img DOM 并添加到容器
  7. 上传一个用户选择的文件
    1. 创建 xhr 对象
    2. 使用 send 方法发送文件数据(二进制格式)