zoukankan      html  css  js  c++  java
  • html5 实现 文件夹上传

    先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件之类的。。。),遂研究百度网盘文件上传功能。。。。。

    发现百度网盘有个上就在input type=file 的标签上加个一个属性“webkitdirectory”,加上次属性即可选择整个文件夹。

    查询属性“webkitdirectory”发现这并不是一个标准支持的属性,经测试,目前仅支持chrome浏览器,IE11/MOZ均不支持  safari暂未测试,谨慎使用。

    MDN:关于次属性说明:

    * Non-standard
    * This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between * * * *implementations and the behavior may change in the future.

    The HTMLInputElement.webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the <input> element should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. The selected file system entries can be obtained using the webkitEntries property.

    对于目前要上传文件夹原生暂未完全支持,要寻求兼容各浏览器文件夹上传恐怕要多费写功夫。如有相关已经实现切体验良好的上传文件夹功能可以使用,请推荐,谢谢!

    可以参考百度网盘网页版做法:支持此属性则显示上传文件夹选项,如果不支持次属性不显示上传文件夹选项

    海纳百川,有容乃大;壁立千仞,无欲则刚。人要有胸怀方能成大事,不要被欲望所驱使,方能风吹不动浪打不摇。 不积跬步无以至千里,不积小流无以成江海。从事技术工作,要时刻学习积累,即使不能一专多能也应术业有专攻,方能以不变应万变。
  • 相关阅读:
    Python os.getcwd()方法
    Python os.walk()方法
    PyTorch 模型构造
    Python map()函数
    字符串转数字测试--知识备忘
    如何判断一个变量是数组Array类型--实例--加个人见解
    js面试题
    ios学习笔记
    读取图片文件--实例
    名言记录
  • 原文地址:https://www.cnblogs.com/websharehome/p/7919887.html
Copyright © 2011-2022 走看看