前端 文件夹上传 解决方案

背景:

　　今天在改功能的时候,居然有一个批量挂接电子文件的这样的一个功能,前端要求选择文件夹?

解决方案:

1:选择多个文件

2:其次前端选择文件夹

如果没有浏览器要求建议使用选择文件夹,比较方便,省的一个一个选,当然,他的缺点就是你必须把要上传的东西放到一个文件夹中

存在的问题:

不是所有的前端浏览器都支持,emmm,想必大家一猜就能猜到坑定是谷歌支持了,俗话说谷歌大法好..

不要期望文件上传这个功能的浏览器兼容性，这是做不到的。

方法:

假定我们的所有用户都用上了 Chrome，要怎么做才能成功上传一个文件夹呢？这里不用drop这种高大上的东西，就用最传统的<input>。用表单 submit 和 ajax 都可以做，先看 submit 方式。

<form method="POST" enctype=multipart/form-data>
  <input type='file' name="file" webkitdirectory >
  <button>upload</button>
</form> 

我们只要添加上 webkitdirectory 这个属性，在选择的时候就可以选择一个文件夹了，如果不加，文件夹被选中的时候就是灰色的。不过貌似加上这个属性就没法选中文件了... enctype=multipart/form-data 也是必要的

其实是加上webkitdirectory属性就可以了,当然现在只有谷歌支持,还存在一个问题,那就是不能选择文件了,慎用!

作者：彼岸舞

时间：2020\11\26

内容关于：工作中用到的小技术

本文属于作者原创,未经允许,禁止转发