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

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

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

<input
  type="file"
  id="file"
  multiple
  accept="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博客