当前位置：文江博客话题详情

Input type=file 刷新页面后如何保存之前选中的值

发布于 2022-09-12 23:14:20 字数 242 浏览 18 评论 0

<input type="file">
问题：选择某个文件后，刷新页面，如何保存之前选中的值()

IndexedDB能存储选中的文件，但是没办法直接赋值到input框
如果因为浏览器限制无法解决这个问题，那么通过 Electron 方式能否解决这个问题

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望喜 2022-09-19 23:14:20

input file 的 files 对象是只读，所以不能做到被赋值。但可以转换思路，既然可以 files 的值存放起来。那么可以在 UI 上封装一下，如果有存储到这个 files 对象，就直接显示其信息，而不是直接显示原生的 input file 控件。

回复收藏 0

若有似无的小暗淡 2022-09-19 23:14:20

感谢我是跳跳吧提供的思路，下面是具体实现demo代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .fake-input {
            cursor: pointer;
            border: 1px solid teal;
            height:25px;
            line-height:25px;
            width: 100px;
            text-align: center;
        }
        .file {
            display: none;
        }
    </style>
</head>
<body>
    <label>
        <div class="fake-input">请选择文件</div>
        <input type="file" class="file">
    </label>
</body>
<script>
    //=====================================初始数据库====================================//
    let dbInstance = null;
    function initDb() {
        const request = indexedDB.open("demo", 1);
        //打开数据库成功
        request.onsuccess = (event) => {
            dbInstance = event.target.result;
            //还原数据
            const request = dbInstance.transaction(["demo"], "readwrite").objectStore("demo").get(1);
            request.onsuccess = function() {
                if (request.result) {
                    console.log("文件值", request.result);
                    document.querySelector(".fake-input").innerHTML = request.result.fileName;
                }
            }
        };
        //错误处理
        request.onerror = (event) => {
            console.error(event);
        };
        //创建demo表
        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            db.createObjectStore("demo", { keyPath: "id" });
        };
    }
    initDb();
    //=====================================文件操作====================================//
    const fileDom = document.querySelector(".file");
    fileDom.addEventListener("change", (e) => {
        const file = e.target.files[0];
        if (file) {
            file.arrayBuffer().then((res) => {
                //为了简化只保留一个值
                dbInstance.transaction(["demo"], "readwrite").objectStore("demo").put({
                    id: 1,
                    fileData: res,
                    fileType: file.type,
                    fileName: file.name,
                });
            })
            document.querySelector(".fake-input").innerHTML = file.name;
        }
    })
</script>
</html>

回复收藏 0

~没有更多了~