我正在做一个需要通过网页提交文件的项目。尽管这不是必需的,但用户可以方便地在选择文件后对其进行编辑。但是,我遇到了一个问题,即在进行更改然后保存它们后读取文件阅读器返回 null。下面有我相当简单的调试代码。
<html>
<head>
</head>
<body>
<input type="file" id="file" value>
<button id="sub">Submit</button>
</body>
<script>
document.getElementById("sub").addEventListener("click", function() {
var reader = new FileReader();
reader.addEventListener('loadend', function() {
var src_code = this.result;
console.log(src_code);
});
if (document.getElementById("file").files.length == 0) {
//empty
alert("empty");
}
else {
console.log(document.getElementById("file").files[0]);
reader.readAsText(document.getElementById("file").files[0]);
}
});
</script>
</html>
我在这里读到另一个问题,声称FileReader对此有错,但不幸的是,我绝对需要文件中的文本,而答案没有提供替代方案。
有没有办法从文件中获取文本,让用户在选择文件后更新文件?
不,没有可靠的方法。
从
因此,用户确实可以编辑磁盘上的文件,甚至可以将其从磁盘中删除。 但是,大多数浏览器会在选择操作系统时使用操作系统提供的元数据,以便通过 FileReader 读取文件。
这意味着,如果您的文件在选择时是 120KB,然后编辑使其成为 100KB 文件,浏览器将要求不再存在的数据,并且阅读器将崩溃。
您当然可以强制浏览器在选择时将完整数据存储在内存中,例如
blob = new Blob( [ await file.arrayBuffer() ], { type: file.type } );
在这里,blob
内存中保存file
在调用时指向的数据。
但是blob
不再与磁盘上的文件连接,因此,如果用户确实编辑了磁盘上的文件,则不会更改blob
。
请注意,至少在macOS上,Firefox实际上能够通过Blob方法(arrayBuffer()
和text()
(处理编辑后的文件(我想操作系统在这里很重要(,但是他们的FileReader仍然会触发错误。Chrome只是在这两种情况下都抛出。 同样,通过XHR
或fetch
获取文件将抛入Chrome(但如果文件仅经过编辑并且仍然存在,则不会在FF中丢失(。