如何使用HTML input type="file"元素选择不同目录下的多个文件？

原生input[type="file"]受浏览器安全限制，开启multiple属性后仅支持选择同一目录下的多个文件，无法直接通过点击选择器实现跨目录多选。不过可以通过拖拽上传类的npm包绕过这一限制，这类包支持用户从不同目录拖拽文件上传，同时也提供点击选择的兼容方案。

React 方案：react-dropzone #

这是React生态中最流行的文件上传组件之一，支持拖拽多个来自不同目录的文件，也可自定义点击触发的文件选择逻辑。

安装 #

npm install react-dropzone
# 或
yarn add react-dropzone

基础示例 #

import { useDropzone } from 'react-dropzone';

function MultiFileUpload() {
  const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
    multiple: true,
    accept: {
      'image/*': ['.png', '.jpg', '.jpeg'] // 可自定义允许的文件类型
    }
  });

  const files = acceptedFiles.map(file => (
    <div key={file.path}>
      {file.path} - {file.size} bytes
    </div>
  ));

  return (
    <div {...getRootProps({ className: 'dropzone' })}>
      <input {...getInputProps()} />
      <p>拖拽文件到这里，或点击选择文件（点击选择仅支持同目录多选，拖拽支持跨目录）</p>
      <div>{files}</div>
    </div>
  );
}

export default MultiFileUpload;

Vue 方案：vue3-dropzone（Vue3）/ vue2-dropzone（Vue2） #

针对不同Vue版本的拖拽上传组件，同样支持跨目录拖拽多选文件，配置灵活。

Vue3 安装与示例 #

npm install vue3-dropzone
# 或
yarn add vue3-dropzone

<template>
  <vue3-dropzone
    ref="myDropzone"
    :options="dropzoneOptions"
    @success="onSuccess"
  ></vue3-dropzone>
</template>

<script setup>
import Vue3Dropzone from 'vue3-dropzone';
import 'vue3-dropzone/dist/vue3-dropzone.css';

const dropzoneOptions = {
  url: '/upload', // 上传接口地址
  maxFilesize: 5, // 单文件最大大小（MB）
  acceptedFiles: 'image/*', // 允许的文件类型
  addRemoveLinks: true
};

const onSuccess = (file, response) => {
  console.log('文件上传成功:', file);
};
</script>

关键说明 #

• 点击文件选择器的方式始终受限于浏览器安全策略，无法跨目录多选，所有组件的点击选择逻辑都基于原生input实现，因此存在同样限制。
• 拖拽上传是目前实现跨目录多选的唯一可行方案，上述组件都已封装好拖拽逻辑，无需自行处理复杂的文件事件。

内容的提问来源于stack exchange，提问作者elango ram