@File

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

<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', function () {
    imgIpt.click()
})
// 这里需要使用this获取文件列表，所以不能使用箭头函数
imgIpt.addEventListener('change', function () {
    console.log(this.files);
    let fr = new FileReader()
    fr.readAsDataURL(this.files[0]);
    fr.addEventListener('load', function () {
        img.src = this.result;
    })
    fr.onprogress = function (e) {
        console.log(e.loaded);
        imgPer.innerHTML = Number(e.loaded / e.total * 100).toFixed(2) + '%';
    }
})

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

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

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
    }
})

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

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文档

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');
})

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

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})`
    })
})

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);
        })
    }
}