<input type="file"> 问题：选择某个文件后，刷新页面，如何保存之前选中的值() IndexedDB能存储选中的文件，但是没办法直接赋值到input框如果因为浏览器限制无法解决这个问题，那么通过 Electron 方式能否解决这个问题

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

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

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

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

阅读 4.2k

感谢我是跳跳吧提供的思路，下面是具体实现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>

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

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

Next.js做纯前端是否可行？

请问开发React Native，一般是推荐哪个主流的UI库呢？

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

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

Next.js做纯前端是否可行？

请问开发React Native，一般是推荐哪个主流的UI库呢？

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