h5文件系统

MysTic_

于 2023-04-17 22:00:39 发布

阅读量107

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/MysTic_/article/details/129790290

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button class="btn">open</button>
        <button class="save">save</button>

        <script>
            const open = document.querySelector(".btn");
            const save = document.querySelector(".save");
            open.addEventListener("click", () => {
                pickFile();
            }); 
            save.addEventListener("click", () => {
                saveFile();
            });
            let fileHandle;
            const pickFile = async () => {
                [fileHandle] = await window.showOpenFilePicker();
                console.log("fileHandle", fileHandle);
                const file = await fileHandle.getFile();
                const content = await file.text();
                console.log("content", content);
                return content;
            };

            const saveFile = async () => {
                const options = {
                    types: [
                        {
                            description: "Test files",
                            accept: {
                                "text/plain": [".txt", '.log'],
                                "application/xml": ['.xml'],
                                "image/jpeg": ['.jpg','jpeg','png'],
                                "binary/octet-stream": ['.dbf', 'prj','.seamline','.rpb', '.shp', '.shx'],
                                "application/octet-stream": ['.bin'],
                                "application/pdf": ['.pdf'],
                                "image/svg+xml": ['.svg'],
                                "image/tiff": [".tif", ".tiff"],
                                "application/zip": ['.zip']
                            },
                        },
                    ],
                };
                const handle = await window.showSaveFilePicker(options);
                const writable = await handle.createWritable();
                await writable.write("Hello World");
                await writable.close();
                return handle;
            };
        </script>
    </body>
</html>