web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、showOpenFilePicker、showDirectoryPicker-Toy模板网

这篇具有很好参考价值的文章主要介绍了web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、showOpenFilePicker、showDirectoryPicker。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

选择文件

此方式不需要创建多余的html标签，非常适合项目开发中使用。文章来源地址https://www.toymoban.com/news/detail-828598.html

<button onclick="readFile()">选择文件</button>

<script>
// 不支持xlsx/docx等微软文件格式
async function readFile() {
	try {
		// 读取文件
		const [fileHandle] = await window.showOpenFilePicker();
		const file = await fileHandle.getFile();
		
		let reader = new FileReader();
		
		reader.onload = ({ target: { result } }) => {
		console.log(`-------输出结果-------\n${result}`);
		}
		
		reader.readAsText(file, 'utf-8');
	} catch (error) {
		console.error('Error selecting file:', error);
	}
}
</script>

选择文件夹

<button onclick="chooseFolder()">选择文件夹</button>

<script>
// 选择文件
async function chooseFolder() {
	try {
		let handle = await showDirectoryPicker(),
		root = await processHandle(handle);
		
		for(let i = 0;i < root.child.length; i++) {
			readFile(root.child[i])
		}
	} catch (error) {
		console.log(error);
		// 用户拒绝的处理
	}
}

// 解析文件夹
async function processHandle(handle) {
    if (handle.kind === 'file') return handle;

    handle.child = [];
    // 得到异步迭代器
    let iter = handle.entries();

    for await (let item of iter) {
        handle.child.push(await processHandle(item[1]));
    }

    return handle;
}

// 读取文件内容
function readFile(fileHandle) {
	let file = await fileHandle.getFile(),
		reader = new FileReader();
	
	reader.onload = ({ target: { result } }) => {
		console.log(result);
	}
	
	reader.readAsText(file, 'utf-8');
	
	// kind: "directory" 表示选择的是文件
	// name: "aText" 文件名字
}
</script>

完整版

<div class="p_20 bs_bb">
    <div class="bs_bb p_10 d_f jc_se bc_rgba_68_68_86_05">
        <button class="fs_30 cursor_pointer" onclick="chooseFile()">选择文件</button>
        <button class="fs_30 cursor_pointer ml_20" onclick="chooseFolder()">选择文件夹</button>
    </div>
</div>

<script>
    // 选择文件
    async function chooseFile() {
        // 创建用于存放文件句柄的变量
        let fileHandle = undefined;
        // 打开文件选择器，解构返回的数组中的第一个元素
        [fileHandle] = await window.showOpenFilePicker();

        readFile(fileHandle);
    }

    // 选择文件夹
    async function chooseFolder() {
        try {
            let handle = await showDirectoryPicker(),
                root = await processHandle(handle);

            for (let i = 0; i < root.child.length; i++) readFile(root.child[i]);
        } catch (error) {
            // 用户拒绝的处理
            console.log(error);
        }
    }

    // 解析文件夹
    async function processHandle(handle) {
        if (handle.kind === 'file') return handle;

        handle.child = [];
        // 得到异步迭代器
        let iter = handle.entries();

        for await (let item of iter) {
            handle.child.push(await processHandle(item[1]));
        }

        return handle;
    }

    // 获取文件内容
    async function readFile(fileHandle) {
        let file = await fileHandle.getFile(),
            reader = new FileReader();

        reader.onload = ({ target: { result } }) => {
            console.log(`-------输出结果-------\n${result}`);
        }

        reader.readAsText(file, 'utf-8');

        // kind: "directory" 表示选择的是文件
        // name: "aText" 文件名字
    }
</script>

到了这里，关于web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、showOpenFilePicker、showDirectoryPicker的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！