html javascript读取本地文件夹所有文件和图片的方式

关注

原创最新推荐文章于 2026-07-29 14:38:21 发布 4.3k 阅读 AI 写同款· GEO 优化 ›

前端读取本地图片信息进行回显在开发项目中，有将图片存储到项目中的，也有将图片存储到nginx，或者文件服务器等等，这次要做的是读取本地硬盘上的图片信息，进行前端的回显，不啰唆，直接上代码吧。1，跳转controller层，传递绝对路径的参数：import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import o... 阅读详情

使用 input 的webkitdirectory multiple属性，目前支持大多数浏览器，不支持IE

HTML内容

<!DOCTYPE html>
<html>
<head>
	<title>ReadImage</title>
</head>
<body>
	<input type="file" id="selectFiles" onchange="dealSelectFiles()" webkitdirectory multiple>
	<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;
			var index = 0;
			for(var file of selectFiles){
				index = index + 1;
				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>

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/webkitdirectory