Javascript,用于读取本地文件的 FileReader 与 XMLHttpRequest?
Javascript, FileReader vs XMLHttpRequest for reading a local file?
我正在尝试使用 javascript 和 Google Chrome 应用程序读取本地文件(我认为可能无法通过 Chrome),但是我看不到最新的解决方法是什么。
我可以用下面的代码阅读它:
obj.read = function() {
return new Promise(function(resolve){
var xmlhttp = new XMLHttpRequest();
var file_path = 'file_name.xml';
xmlhttp.open('GET', file_path, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let xml = xmlhttp.responseText;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
console.log(xml);
console.log(xmlDoc);
resolve(xmlDoc);
}
}
});
};
但好像我应该使用类似
的东西
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
console.log(e.target.result);
};
})(file_path);
var file_path = 'file_name.xml';
var file_parts = [
new Blob(['you construct a file...'],{type: 'text/plain'}),
'Same way as you do with blob',
new Uint16Array([33])
];
var file = new File(file_parts, file_path);
reader.readAsText(file);
(从复制)
(我很难找到关于这个主题的文献)
那么,有什么办法呢?
第一种方法(XMLHttpRequest
用于包中的文件)完全有效,如果您只需要整个文件,则可能更容易。
你所说的 "second approach" 是从关于 实例化 File
对象 的问题中提取的,而不是读取实际文件。这将不允许您读取现有文件,只需创建一个可以在 DOM 表单中使用的 "virtual" 文件。
这里有全部 HTML FileSystem
API, which is not implemented anywhere but Chrome and as such documentation is scarce and fraught with big scary red warnings. You can actually use it for the purpose you state - reading App's own files - by starting with chrome.runtime.getPackageDirectoryEntry
,但在您的特定情况下这可能有点矫枉过正,而且您将很难找到这样做的例子。
我能想到的只有两个理由来打扰FileSystem
API 对App 自己的文件的猛兽的沉睡:
- 您不知道在运行时包含哪些文件。然后就可以use it to list files了。罕见,但有可能。
- 您需要比 "get me the whole thing" 更细粒度的访问,例如您只需要一个大文件的一部分。
请注意,FileSystem
API 主要在 Chrome 中用于 chrome.fileSystem
应用程序 API。考虑到 Chrome 将在 Chrome OS 上支持 Chrome 应用一段时间,尽管它不是标准的,但它很可能会保留下来。
幸存文件:
- 上述HTML5Rocks文章:Exploring the FileSystem APIs
- 上一个 public 标准文件:File API: Directories and System
File
API 上的实际标准文档(您的 "second example" 包含在其中):File API
我正在尝试使用 javascript 和 Google Chrome 应用程序读取本地文件(我认为可能无法通过 Chrome),但是我看不到最新的解决方法是什么。
我可以用下面的代码阅读它:
obj.read = function() {
return new Promise(function(resolve){
var xmlhttp = new XMLHttpRequest();
var file_path = 'file_name.xml';
xmlhttp.open('GET', file_path, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let xml = xmlhttp.responseText;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
console.log(xml);
console.log(xmlDoc);
resolve(xmlDoc);
}
}
});
};
但好像我应该使用类似
的东西var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
console.log(e.target.result);
};
})(file_path);
var file_path = 'file_name.xml';
var file_parts = [
new Blob(['you construct a file...'],{type: 'text/plain'}),
'Same way as you do with blob',
new Uint16Array([33])
];
var file = new File(file_parts, file_path);
reader.readAsText(file);
(从复制) (我很难找到关于这个主题的文献)
那么,有什么办法呢?
第一种方法(XMLHttpRequest
用于包中的文件)完全有效,如果您只需要整个文件,则可能更容易。
你所说的 "second approach" 是从关于 实例化 File
对象 的问题中提取的,而不是读取实际文件。这将不允许您读取现有文件,只需创建一个可以在 DOM 表单中使用的 "virtual" 文件。
这里有全部 HTML FileSystem
API, which is not implemented anywhere but Chrome and as such documentation is scarce and fraught with big scary red warnings. You can actually use it for the purpose you state - reading App's own files - by starting with chrome.runtime.getPackageDirectoryEntry
,但在您的特定情况下这可能有点矫枉过正,而且您将很难找到这样做的例子。
我能想到的只有两个理由来打扰FileSystem
API 对App 自己的文件的猛兽的沉睡:
- 您不知道在运行时包含哪些文件。然后就可以use it to list files了。罕见,但有可能。
- 您需要比 "get me the whole thing" 更细粒度的访问,例如您只需要一个大文件的一部分。
请注意,FileSystem
API 主要在 Chrome 中用于 chrome.fileSystem
应用程序 API。考虑到 Chrome 将在 Chrome OS 上支持 Chrome 应用一段时间,尽管它不是标准的,但它很可能会保留下来。
幸存文件:
- 上述HTML5Rocks文章:Exploring the FileSystem APIs
- 上一个 public 标准文件:File API: Directories and System
File
API 上的实际标准文档(您的 "second example" 包含在其中):File API