Javascript，FileReader与XMLHttpRequest用于读取本地文件？

Question

I'm trying to read a local file with javascript and a Google Chrome App (it may not be possible through Chrome I think), but I can't see what's the latest approach to the problem.

I can read it with the following code:

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);
            }
        }
    });
};

But it is like I should be using something like

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);

(copied from https://stackoverflow.com/a/24495213/826815 ) (I'm having a hard time finding literature on this topic)

So, what's the way to do it?

Answer 1

The first approach ( XMLHttpRequest for a file in the package) is perfectly valid and likely to be easier if all you need is the whole file.

---

What you call a "second approach" is lifted from a question about instantiating a File object , not reading an actual file. This would not allow you to read an existing file, just create a "virtual" file that can be used in DOM forms.

There's the whole 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 , but that's probably overkill in your particular case and again, you'll have a hard time finding examples of doing so.

I can think of only two reasons to disturb the slumber of the beast that is FileSystem API for App's own files:

1. You don't know, at runtime, what files are included. Then you can use it to list files . Rare, but possible.
2. You need a more fine-grained access than "get me the whole thing", for example you only need a chunk of a large file.

Note that FileSystem API is primarily used in Chrome for chrome.fileSystem Apps API. Considering that Chrome is going to support Chrome Apps on Chrome OS for a while, it's likely to stay, despite being non-standard.

Surviving documentation:

• The above-mentioned HTML5Rocks article: Exploring the FileSystem APIs
• Last public standards document: File API: Directories and System
• Actual standards document on File API (that your "second example" is covered by): File API