背景:
今天在改功能的时候,居然有一个批量挂接电子文件的这样的一个功能,前端要求选择文件夹?
解决方案:
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
内容关于:工作中用到的小技术
本文属于作者原创,未经允许,禁止转发