js web上传文件夹,访问文件夹的多有文件 input type=file
【摘要】
在上传文件的时候,web是运行用户上传文件夹的,但会有浏览器自带的提示
如chrome这样
运行input上传文件夹需要设置 两个重要属性 webkitdirectory multiple
属性multiple: 允许上传多个文件
属性webkitdirectory : 它指示&...
在上传文件的时候,web是运行用户上传文件夹的,但会有浏览器自带的提示
如chrome这样
运行input上传文件夹需要设置 两个重要属性 webkitdirectory multiple
属性multiple: 允许上传多个文件
属性webkitdirectory : 它指示<input>元素应该允许用户选择目录而不是文件。选择目录后,目录及其整个内容层次结构将包含在选定项集中。可以使用WebKitEntries属性获取选定的文件系统条目。
主要设置了webkitdirectory 属性只能选文件夹,不能选文件了
代码如下
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
<style type="text/css">
-
-
</style>
-
</head>
-
<body>
-
<input type="file" webkitdirectory multiple onchange="selectFile(this)" />
-
-
<script>
-
function selectFile (even) {
-
console.log(even.files)
-
}
-
-
</script>
-
</body>
-
</html>
截图
另一个例子显示选中的文件
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
</head>
-
<body>
-
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
-
<ul id="listing"></ul>
-
-
<script>
-
document.getElementById("filepicker").addEventListener("change", function(event) {
-
let output = document.getElementById("listing");
-
let files = event.target.files;
-
-
for (let i=0; i<files.length; i++) {
-
let item = document.createElement("li");
-
item.innerHTML = files[i].webkitRelativePath;
-
output.appendChild(item);
-
};
-
}, false);
-
</script>
-
</body>
-
</html>
文章来源: fizzz.blog.csdn.net,作者:拿我格子衫来,版权归原作者所有,如需转载,请联系作者。
原文链接:fizzz.blog.csdn.net/article/details/101018457
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)