阿超 > input+type=file同时支持文件和文件夹

input+type=file同时支持文件和文件夹

2023-06-02

前端

1没有知识的旅游者是一只没有翅膀的鸟。——萨阿迪

使用的dropzone库，你可以将任意类型的文件拖拽进去上传，如果是目录，则会获取目录内的文件

https://github.com/dropzone/dropzone

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link
  rel="stylesheet"
  href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"
  type="text/css"
/>

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<div class="my-dropzone dz-clickable" style="
    display: block;
    width: 100px;
    height: 100px;
    background: greenyellow;
"></div>

<script>
  // Dropzone has been added as a global variable.
  const dropzone = new Dropzone("div.my-dropzone", { url: "/file/post" });
   console.log({dropzone})
</script>

效果：