js web上传文件夹,访问文件夹的多有文件 input type=file

举报
拿我格子衫来 发表于 2022/03/17 23:52:38 2022/03/17
【摘要】 在上传文件的时候,web是运行用户上传文件夹的,但会有浏览器自带的提示 如chrome这样 运行input上传文件夹需要设置 两个重要属性 webkitdirectory multiple   属性multiple: 允许上传多个文件 属性webkitdirectory : 它指示&...

在上传文件的时候,web是运行用户上传文件夹的,但会有浏览器自带的提示

如chrome这样

运行input上传文件夹需要设置 两个重要属性 webkitdirectory multiple

 

属性multiple: 允许上传多个文件

属性webkitdirectory : 它指示<input>元素应该允许用户选择目录而不是文件。选择目录后,目录及其整个内容层次结构将包含在选定项集中。可以使用WebKitEntries属性获取选定的文件系统条目。

主要设置了webkitdirectory 属性只能选文件夹,不能选文件了

代码如下


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. </style>
  7. </head>
  8. <body>
  9. <input type="file" webkitdirectory multiple onchange="selectFile(this)" />
  10. <script>
  11. function selectFile (even) {
  12. console.log(even.files)
  13. }
  14. </script>
  15. </body>
  16. </html>

 

截图

 

 

另一个例子显示选中的文件


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
  8. <ul id="listing"></ul>
  9. <script>
  10. document.getElementById("filepicker").addEventListener("change", function(event) {
  11. let output = document.getElementById("listing");
  12. let files = event.target.files;
  13. for (let i=0; i<files.length; i++) {
  14. let item = document.createElement("li");
  15. item.innerHTML = files[i].webkitRelativePath;
  16. output.appendChild(item);
  17. };
  18. }, false);
  19. </script>
  20. </body>
  21. </html>

 

文章来源: fizzz.blog.csdn.net,作者:拿我格子衫来,版权归原作者所有,如需转载,请联系作者。

原文链接:fizzz.blog.csdn.net/article/details/101018457

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。