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

拿我格子衫来

发布于 2022-01-24 10:15:17

5.3K0

发布于 2022-01-24 10:15:17

文章被收录于专栏：TopFETopFE

在上传文件的时候,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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html