javascript - 未找到文件 - 文件系统 API、Javascript

Question

使用本地 Apache Web 服务器进行测试，使用 Chrome (33) 和一段非常基本的代码

function onInitFs(fs) {
    fs.root.getFile("productinfo.xml", {}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(e) {
                .
                .
                .
            };
            reader.readAsText(file);
        }, errorHandler);
    }, errorHandler);
}

window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler); 

无论我将文件 (productinfo.xml) 放在哪里，我都会得到:

A requested file or directory could not be found at the time an operation was processed

我的根目录是C:\xampp\htdocs，所以将productinfo.xml放在那里应该可以吗？

Answer 1

正如评论所指出的，您将需要进行 AJAX 调用 - 如果不从服务器获取文件，您就无法获取该文件。我不确定您是否会坚持每次都进行 AJAX 调用。然而，使用 HTML5 文件系统可以让您不必每次都重新获取 XML。

下面的代码/我的答案是在文件存在时在本地获取文件，在本地不存在时从服务器获取文件，您的代码将如下所示(或非常类似的内容) - 我复制并粘贴了很多工作代码并尝试抽象一些组件):

调用函数获取xml文件， 无论是本地还是来自服务器，请参阅下面的代码 - 确保在进行以下调用之前初始化 fs，这是通过将其设置为 onInitFs< 中的全局变量来完成的 在请求中调用文件系统函数

getFile("productinfo.xml",function(textDataFromFile){
  console.log("some callback function"}
  //your ... code should be handled here 
);

从服务器获取文件的 AJAX 调用

function obtainFileFromServer(filename,callback){
  var xhr2 = new XMLHttpRequest();
  xhr2.onload = function(e){
      writeToFile(filename,xhr2.response,callback);
  }
  xhr2.open('GET', "path/to/"+filename, true);
  xhr2.send();
}

从 HTML5 文件系统读取。

function getFile(filename,callback){
  fs.root.getFile(filename, {create:false}, function(fileEntry) {
    fileEntry.file(function(file) {
      var errorHandler2 = function(e){
      switch(e.name){
        case "NotFoundError":
            //if the productinfo.xml is not found, then go get it from the server
            //In you're callback you'll want to also recall the getFile
            obtainFileFromServer(function(){getFile(filename,callback);});
            break;
        default:
            console.log(e);
            break;
        }
      }
      var reader = new FileReader();
      reader.onloadend = function(e) {
        callback(this.result);
      };
      reader.readAsText(file);
    }, errorHandler2);
  }, errorHandler);
}

写入 HTML5 文件系统

有两种方法可以查看 write 方法 (writeToFile())，如果您要替换旧文件，而新文件恰好更短，您将需要在写入之前 chop 它(您只能在打开文件后立即 chop - 这就是为什么它首先发生)。这似乎超出了这个问题的范围。我包含了要 chop 的代码，但不包含用于确定是否需要重新下载示例/是否旧的逻辑。

function writeToFile(filename,data,callback){
    fs.root.getFile(filename, {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) {
            //we've truncated the file, now write the data
            writer.onwriteend = function(e){
                callback();
            }
            var blob = new Blob([data]);
            writer.write(blob);
        };
        writer.truncate(0);
    }, errorHandler);
  }, errorHandler);
}