在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 方法发送文件数据（二进制格式）