@File

Overview
FileReader
Cases
Drag

概述

. 文件选择是一种特殊的<input>，类型为file

. 用来选择指定类型的文件

<input type="file" name="" id="" multiple accept="">

file：作为文件选择，input类型应指定为file

multiple：默认选择单个文件；多选时应指定multiple

accept：是选择文件的类型，类型之间使用,分割，也可以使用通配符*

类别	说明
text/*	plain\|css\|csv\|html\|javascript\|rtf\|xml
image/*	jpg\|png\|gif\|jpeg\|tiff
application/*	json\|xml-dtd\|rtf\|msword\|vnd.ms-powerpoint\|vnd.ms-excel\|xml\|zip
audio/*	ac3\|mpeg\|mp3\|
video/*	mpeg\|mp4\|

事件 FileReader

本地处理选中的文件，便于预览和调整，不必上到服务器

更多信息，请访问官方文档 - FileReader

根据内容，有3个实例方法 Instance methods：

readAsText()：处理.txt/.HTML/.js等文本文件；格式应为UTF-8

readAsDataURL()：处理图片，转换成 data:image/jpeg;base64格式

readAsArrayBuffer()：处理字节流

基本步骤

选择文件

使用合适的文件处理函数

渲染文件处理结果

完整事件流

包括：开始加载 loadstart、加载中 progress、加载成功load、加载结束 loadend、加载出错 error 和加载放弃 abort，分别对应以下几个事件函数

fr.addEventListener("loadstart", (e) => {
  console.log('fr start');
});
fr.addEventListener("load", (e) => {
  console.log('fr loaded', e.target.result);
  //使用数据
});
fr.addEventListener("loadend", (e) => {
  console.log('fr end');
});
fr.addEventListener("progress", (e) => {
  console.log('fr progress', e.loaded);
  //进度掌控
});
fr.addEventListener("error", (e) => {
  console.log('fr error');
});
fr.addEventListener("abort", (e) => {
  console.log('fr abort');
});

FileReader的progress事件的e参数包含一个lengthComputable属性，如果为true，则可以计算出文件的总大小。如果文件太大或者无法获取总大小，lengthComputable可能为false，这时无法准确计算进度。

图片的使用 Image

[] 用户头像

. 定制文件按钮：隐藏默认的input元素，设计新元素，并把新元素的click事件转接到原来的input元素

. 定制用户头像：选择图片，经过处理后，更新用户头像

<div class="avatar-wrap">
    <img src="./imgs/avatar.png" alt="图片不可用" class='avatar-img'>
    <input type="file" accept="image/*" class='avatar-ipt' hidden>
    <button type="button" class='avatar-btn'>Choose File</button>
    <div class='avatar-per'>0%</div>
</div>

let imgIpt = document.querySelector('.avatar-ipt')
let imgBtn = document.querySelector('.avatar-btn')
let img = document.querySelector('.avatar-img')
let imgPer = document.querySelector('.avatar-per')
imgBtn.addEventListener('click', () => {
  imgIpt.click()
})

imgIpt.addEventListener('change', (e) => {
  let file = e.target.files[0]
  let fr = new FileReader()

  fr.addEventListener("loadstart", (e) => {
    console.log('fr start');
  });
  fr.addEventListener("load", (e) => {
    console.log('fr loaded', e.target.result);
    img.src = e.target.result;
  });
  fr.addEventListener("loadend", (e) => {
    console.log('fr end');
  });
  fr.addEventListener("progress", (e) => {
    console.log('fr progress', e);
    if (e.lengthComputable) {
      let per = Math.round(e.loaded / e.total * 100);
      imgPer.innerHTML = per + '%';
    }
  });
  fr.addEventListener("error", (e) => {
    console.log('fr error');
  });
  fr.addEventListener("abort", (e) => {
    console.log('fr abort');
  });
  fr.readAsDataURL(file);
})

或者使用URL库函数直接生成src

imgIpt.addEventListener('change', function () {
  let file = this.files[0]
  console.log(file);
  imgEl.src = URL.createObjectURL(file);
})

办公文档 OA

. 办公文档使用比较多的是txt和excel

[] 读取本地文本文件并显示其内容

[文件内容]

HTML

<input type="file" id="txt-ipt" accept="text/*">
<div id='txt-cont'>.</div>

JavaScript

let txtIpt = document.querySelector('#txt-ipt')
let txtCont = document.querySelector('#txt-cont')
txtIpt.addEventListener('change', function () {
    let file = this.files[0]
    let fr = new FileReader()
    fr.readAsText(file)
    fr.onload = function (e) {
        console.log(e.target.result);
        txtCont.innerHTML = e.target.result
    }
})

[] 读取OA文档-excel

. 借助第三方库SheetJS Community Edition实现

. 提示：请选择excel文档

HTML

<input type="file" name="excel" id="excel-ipt" accept="application/*">

JavaScript

let excelCont = document.querySelector('#excel-cont')
let excel = document.querySelector('#excel')
excel.addEventListener('change', function () {
    let fr = new FileReader()
    fr.readAsArrayBuffer(this.files[0])
    fr.addEventListener('load', function () {
        let res = this.result;
        let workbook = XLSX.read(res, { type: 'array' });
        let sheetName = workbook.SheetNames[0];
        let sheet = workbook.Sheets[sheetName];
        console.log(sheet);
        excelCont.innerHTML = XLSX.utils.sheet_to_html(sheet);
    })
})
//请查看sheet内容，定制excel文档

[] 表格table转换为OA文档-excel

. 借助第三方库sheetJS实现

name	age	unit	cell	email
gl	gz	nj	sz	cq
hz	bj	xm	lz	sz
sh	sy	nn	zz	wh

JavaScript

let tblBtn = document.querySelector('#tblBtn')
let tbl = document.querySelector('#tbl')
tblBtn.addEventListener('click', () => {
    let tblBook = XLSX.utils.table_to_book(tbl);
    XLSX.writeFile(tblBook, 'out.xlsx');
})

文件拖拽 Drag

说明

. 定义拖拉区并指定drop事件

. 完整过程：拖拽进入 dragenter，拖拽 dragover、拖拽释放drop

. 注意：系统默认会打开拖入的文件，应取消dragenter和dragover的默认动作

[] 拖拉选择文件定制头像

Drag files here

HTML

<div id="zone">Drag files here</div>

JavaScript

let drag = document.querySelector('#zone')
drag.addEventListener('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
})
drag.addEventListener('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
})
drag.addEventListener('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
    let fr = new FileReader()
    fr.readAsDataURL(e.dataTransfer.files[0]);
    fr.addEventListener('load', function () {
        drag.style.backgroundImage = `url(${this.result})`
    })
})

[] 拖动多个图片并显示

. 可持续添加

Drag multiple files here

获取的多个文件列表信息不是数组，所以不能使用forEach处理，只能使用普通的for

function dealFiles(files) {
    for (let i = 0; i ≤ files.length; i++) {
        console.log(files[i]);
        let img = document.createElement('img')
        let fr = new FileReader()
        fr.readAsDataURL(files[i]);
        fr.addEventListener('load', function () {
            img.src = this.result;
            mulDis.appendChild(img);
        })
    }
}

如何知道单个文件的信息

如何选择多个文件

如何查看选择文件的个数

文件类型都有哪些

如何指定选择文件的类型

如何自定义UI

如何拖拉获取文件信息

如果查看文件内容

总结与作业 Summary & Homework

总结: . file的使用：定制和拖拽
作业: 定制个人头像和相册，并更新到个人网站

根据提供的学生花名册文档定制内容并展示