仅在浏览器中通过鼠标单击从输入上传多个文件

Question

我正在尝试实施网络解决方案，客户端可以从

<input type="file" />

字段上传多个文件。

问题是我不想重复点击“浏览”按钮来逐一选择多个文件。

我希望当我单击“浏览”按钮并打开弹出窗口时，只需单击鼠标即可选择多个文件。

我的操作系统是Windows。我尝试使用

KeyboardEvent

和

MouseEvent

，然后使用

dispatchEvent

。 JS代码

然后我尝试使用 FilePond 库，但没有成功。

最后我支持了chatGPT，它说answer

那么在浏览器中通过鼠标单击（不按 Ctrl 也不按 Shift）真的不可能多选文件吗？

Answer 1

启用多个属性 允许用户在本机对话框中使用 Ctrl 或 Shift 一次选择多个文件

<input type="file" id="fileInput" multiple />

或者提供拖放区域，用户可以直接选择并拖动多个文件：

<div
  id="dropzone"
>
  Drag and drop files here
</div>
<input type="file" id="fileInput" multiple style="display: none;" />



const dropzone = document.getElementById("dropzone");
const fileInput = document.getElementById("fileInput");

dropzone.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropzone.style.borderColor = "blue";
});

dropzone.addEventListener("dragleave", () => {
  dropzone.style.borderColor = "#ccc";
});

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropzone.style.borderColor = "#ccc";

  const files = Array.from(e.dataTransfer.files);
});

dropzone.addEventListener("click", () => {
  fileInput.click();
});

fileInput.addEventListener("change", (e) => {
  const files = Array.from(fileInput.files);
});

由于操作系统/浏览器的限制，在不按 Ctrl 或 Shift 的情况下，无法在文件对话框中直接使用鼠标多选文件。但是，您可以通过拖放界面来解决这个问题