<input type="file">
问题:选择某个文件后,刷新页面,如何保存之前选中的值()
- IndexedDB能存储选中的文件,但是没办法直接赋值到input框
- 如果因为浏览器限制无法解决这个问题,那么通过 Electron 方式能否解决这个问题
<input type="file">
问题:选择某个文件后,刷新页面,如何保存之前选中的值()
<!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>
13 回答13k 阅读
8 回答2.8k 阅读
2 回答5.2k 阅读✓ 已解决
5 回答1.4k 阅读
7 回答2.2k 阅读
3 回答2.3k 阅读✓ 已解决
3 回答1k 阅读✓ 已解决
input file 的 files 对象是只读,所以不能做到被赋值。但可以转换思路,既然可以 files 的值存放起来。那么可以在 UI 上封装一下,如果有存储到这个 files 对象,就直接显示其信息,而不是直接显示原生的 input file 控件。