用JS读取本地XML

问题描述

目前，由于无法在没有 - allow-file-access-from-files 的情况下通过ajax读取本地文件。但我目前需要创建一个Web应用程序，其中数据库是一个xml文件（在极端情况下为json），位于一个带有index.html的目录中。可以理解，用户可以在本地运行该应用程序。是否有解决xml-（json-）文件的解决方法，而不将其包装在函数中并更改为js扩展名？

At the moment, due to the security policy Chromium can not read local files via ajax without --allow-file-access-from-files. But I currently need to create a web application where the database is a xml-file (in the extreme case, json), located in one dir with index.html. It is understood that the user can run this application locally. Are there workarounds for reading xml- (json-) file, without wrapping it in a function and change to js extension?

loadXMLFile('./file.xml').then(xml => {
    // working with xml
});

function loadXMLFile(filename) {
    return new Promise(function(resolve, reject) {
        if('ActiveXObject' in window) {
            // If is IE
            var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = false;
            xmlDoc.load(filename);

            resolve(xmlDoc.xml);
        } else {
            /*
             * how to read xml file if is not IE?
             * ...
             * resolve(something);
             */
        }

    }
}

推荐答案

使用 XMLHttpRequest（）访问文件：铬协议或者< link> 没有的元素 - 在chrome实例启动时设置的allow-file-access-from-files 标志默认情况下未启用。

Accessing file: protocol at chromium using XMLHttpRequest() or <link> element without --allow-file-access-from-files flag set at chromium instance launch is not enabled by default.

如果用户知道应用程序要使用本地文件，您可以使用< input type =file> 元素，以便用户从用户上传文件本地文件系统，使用 FileReader 处理文件，然后继续申请。

If user is aware that local files are to be used by the application you can utilize <input type="file"> element for user to upload file from user local filesystem, process file using FileReader, then proceed with application.

否则，建议用户使用应用程序需要使用启动chrome - 从文件中允许文件访问标志设置，这可以通过为此目的创建启动器来完成，为其指定不同的用户数据目录铬的例子。启动器可以是，例如

Else, advise user that use of application requires launching chromium with --allow-file-access-from-files flag set, which can be done by creating a launcher for this purpose, specifying a different user data directory for the instance of chromium. The launcher could be, for example

/usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files

另请参见

上述命令也可以在<$运行c $ c> terminal

$ /usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files

没有创建桌面启动器;当铬的实例关闭时，运行

without creating a desktop launcher; where when the instance of chromium is closed run

$ rm -rf /home/user/.config/chromium-temp

删除chrome实例的配置文件夹。

to remove the configuration folder for the instance of chromium.

设置好标志后，用户可以在 rel =import属性中包含< link> 元素和 href 指向本地文件，键入设置为application / xml，用于 XMLHttpRequest 以外的选项来获取文件。访问 XML 文档使用

Once the flag is set, user can include <link> element with rel="import" attribute and href pointing to local file and type set to "application/xml", for option other than XMLHttpRequest to get file. Access XML document using

const doc = document.querySelector("link[rel=import]").import;

参见。

另一个替代方案，即更多涉及，将使用 requestFileSystem 将文件存储在 LocalFileSystem 。

Another alternative, though more involved, would be to use requestFileSystem to to store the file at LocalFileSystem.

参见

• 使用webkitRequestFileSystem

• How to use webkitRequestFileSystem at file: protocol
• jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?
• How to Write in file (user directory) using JavaScript?

或创建或修改chrome应用程序并使用

Or create or modify a chrome app and use

chrome.fileSystem

请参阅。

最简单的方法是提供文件的方法通过肯定的用户操作上传;处理上传的文件，然后继续申请。

The simplest approach would be to provide a means for file upload by affirmative user action; process the uploaded file, then proceed with the application.

const reader = new FileReader;

const parser = new DOMParser;

const startApp = function startApp(xml) {
  return Promise.resolve(xml || doc)
};

const fileUpload = document.getElementById("fileupload");

const label = document.querySelector("label[for=fileupload]");

const handleAppStart = function handleStartApp(xml) {
  console.log("xml document:", xml);
  label.innerHTML = currentFileName + " successfully uploaded";
  // do app stuff
}

const handleError = function handleError(err) {
  console.error(err)
}

let doc;
let currentFileName;

reader.addEventListener("loadend", handleFileRead);

reader.addEventListener("error", handleError);

function handleFileRead(event) {
  label.innerHTML = "";
  currentFileName = "";
  try {
    doc = parser.parseFromString(reader.result, "application/xml");
    fileUpload.value = "";

    startApp(doc)
    .then(function(data) {
        handleAppStart(data)
    })
    .catch(handleError);
  } catch (e) {
    handleError(e);
  }
}

function handleFileUpload(event) {
  let file = fileUpload.files[0];
  if (/xml/.test(file.type)) {
    reader.readAsText(file);
    currentFileName = file.name;
  }
}

fileUpload.addEventListener("change", handleFileUpload)

<input type="file" name="fileupload" id="fileupload" accept=".xml" />
<label for="fileupload"></label>

这篇关于用JS读取本地XML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！