通过使用文件 API，web 内容可以要求用户选择本地文件，然后读取这些文件的内容。这种选择可以通过使用 HTML <input type="file"> 元素或通过拖放来完成。

1.通过 click() 方法使用隐藏的文件 input 元素

你可以隐藏公认难看的文件 <input> 元素并显示你自己的界面来打开文件选择器，然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 display:none 的样式，再调用 <input> 元素的 click() 方法来实现。 

<inputtype="file"id="file"multipleaccept="image/*"style="display:none" />
<button id="uploadBut" type="button">选择一些文件</button>

const uploadBut = document.getElementById("uploadBut");
const file = document.getElementById("file");// 用户点击文件上传按钮
uploadBut.addEventListener("click",(e) => {if (file) {file.click();}},false,
);// input type:file 的change事件触发,执行拿到上柴男文件列表
file.addEventListener('change', () => {console.log(file.files);
})

 2.使用拖放来选择文件

 <div class="dropbox">拖拽上传文件</div>

let dropbox = document.querySelector('.dropbox')dropbox.addEventListener("dragenter", dragenter, false)dropbox.addEventListener("dragover", dragover, false)dropbox.addEventListener("drop", drop, false)dropbox.addEventListener('dragleave', dragleave, false)function dragenter(e) {e.stopPropagation();e.preventDefault();}// 进入拖拽容器function dragover(e) {e.stopPropagation();e.preventDefault();}// 离开拖拽容器function dragleave(e) {e.stopPropagation();e.preventDefault();}// 将拖拽标签放在拖拽容器上(鼠标松开)function drop(e) {e.stopPropagation();e.preventDefault();const dt = e.dataTransfer;const files = dt.files;console.log(dt.files);}

实例 : 案例 - 拖拽上传文件,生成缩略图-CSDN博客