JavaScript读取文件夹中的文件内容、输入文件内容到控制台、网页版编辑器、showDirectoryPicker、entries、getFile、FileReader、readAsText

---

前言

1、此案例只实现一级目录，未实现树形目录。有能力的朋友可以根据此案例实现一个网页版的编辑器，可以参考Visual Studio Code网页办的编辑器来实现。
2、fileArray变量有问题，如果自定义变量接收文件句柄，那么将无法实现树形目录功能。具体原因暂时未找到，不过可以查看此文章解决问题。文章已经正常实现树形目录结构，在文章的JavaScript部分找到handle.children = [];即是解决方案。

---

html

<div class="p_20 bs_bb">
	<div class="d_f jc_c">
		<button id="idFolder" class="w_50_ fs_30 cursor_pointer">打开文件夹</button>
	</div>
	
	<div id="idContent" class="m_t_20 bs_bb p_20 bc_rgba_192_1"></div>
</div>

---

JavaScript

全局变量

let fileArray = [];

用fileArray来保存获取到的文件句柄。

---

获取文件夹中的文件句柄

idFolder.onclick = async function () {
    
    
	try {
    
    
		let handle = await showDirectoryPicker();
		
		fileArray = await processHandle(handle);
		
		createDocment(fileArray);
	} catch (error) {
    
    
		console.log(error);
		// 用户拒绝的处理
	}
};

---

使用递归获取句柄(处理句柄)

async function processHandle(handle) {
    
    
	if (handle.kind === 'file') return handle;
	
	// 得到异步迭代器
	let iter = handle.entries(),
		fileArray = [];
	
	for await (let item of iter) fileArray.push(await processHandle(item[1]));
	
	return fileArray;
}

---

创建一级目录

function createDocment(fileList) {
    
    
	let innerHtmlStr = '';
	
	fileList.forEach(item => {
    
    
		if (item.name) innerHtmlStr += `<div class="p_6 bs_bb fs_18 w_fc cursor_pointer" οnclick="handleFileContent(event)">${
      
      item.name}</div>`;
	});
	
	idContent.innerHTML = innerHtmlStr;
}

---

点击文件名获取文件内容

function handleFileContent({
     
      target: {
     
      innerText } }) {
    
    
	fileArray.forEach(item => {
    
    
		if (item.name === innerText) readText(item);
	});
}

---

读取文件内容并输出

async function readText(fileHandle) {
    
    
	let file = await fileHandle.getFile(),
		reader = new FileReader();
	
	reader.onload = ({
     
      target: {
     
      result } }) => {
    
    
		console.log(`-------输出结果-------\n${
      
      result}`);
	}
	
	reader.readAsText(file, 'utf-8');
}