Javascript 讀取目標目錄內所有檔案－Lung-Yu,Tsai 的部落格

透過input type=file 的html標籤設置一個按鈕，並透過javascript對該標籤設置按鈕傾聽事件。

在使用者選擇完目標目錄夾之後，透過event.target.files 取得目標目錄內的檔案名稱。

接著即可以對目標目錄內的檔案進行處理，以下範例是將目錄內的檔案當作圖片進行顯示。

<body> 
<H1> 圖片顯示器</H1>
<input type="file" webkitdirectory="true" id="my_test">
<div id="pics_area">
</div>


<p>Created by Lung yu, tsai</p>
<script> 

document.getElementById('my_test').addEventListener('change', function(event) {	//my_test 為觸發運作的按鈕
	let files = event.target.files;	//選取之目標目錄內的檔案清單
	let listing = document.getElementById('pics_area');	//(透過id)取得要放置圖片的標籤位置

	for(let i=0; i<files.length; i++) {
		let item = document.createElement("img");	//產生圖片標籤
		item.src = files[i].webkitRelativePath;	//設定圖片的來源位置
		item.style.padding = "50px 10px 20px 30px"; //排版用
		listing.appendChild(item);
		alert(files[i].webkitRelativePath);
	}
});


</script> 

</body>