转载：html打开本地文件夹读取，显示图片_html展示文件夹下面的图片-CSDN博客

仅作为记录，大佬请跳过

感谢大佬博主文章，传送门

1、vs code中建立a.html

2、a.html代码：

<!DOCTYPE html>
<html>
<head>
	<title>ReadImage</title>
	<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
	<input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
	<canvas id="myCanvas" width=1440 height=900></canvas>
 
	<script type="text/javascript">
		var imgPosX = 0;
		var imgWidth = 256;
		function dealSelectFiles(){
			/// get select files.
			var selectFiles = document.getElementById("selectFiles").files;
 
			for(var file of selectFiles){
				console.log(file.webkitRelativePath);
 
				/// read file content.
				var reader = new FileReader();
				reader.readAsDataURL(file);
 
				reader.onloadend = function(){
					/// deal data.
					var img = new Image();
					/// after loader, result storage the file content result.
					img.src = this.result;	
					img.onload = function(){
						var myCanvas = document.getElementById("myCanvas");
						var cxt = myCanvas.getContext('2d');
 
						cxt.drawImage(img, imgPosX, 0);
						imgPosX += imgWidth;
					}
				}
			}
		}
	</script>
</body>
</html>