用JS读取本地XML [英] Read local XML with JS
问题描述
目前，由于安全性策略Chromium 无法在没有 - 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.
- allow-file-access-from-files
默认情况下，file：// URIs无法读取其他file：// URI。对于需要旧行为进行测试的开发人员，这是
覆盖。
By default, file:// URIs cannot read other file:// URIs. This is an override for developers who need the old behavior for testing.
目前，由于安全策略，Chromium无法在没有<$ c $的情况下通过ajax读取本地
文件C> - 让文件存取的档案。但我
目前需要创建一个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?
如果用户知道应用程序要使用本地文件，您可以使用< 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
另请参见如何做我将谷歌浏览器标记--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.
参见
- 如何在文件：protocol 使用webkitRequestFileSystem
- jQuery文件上传插件：是否可以保留上传文件夹的结构？
- 如何使用JavaScript写入文件（用户目录）？
- 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
请参阅 GoogleChrome / chrome -app-samples / filesystem-access 。
最简单的方法是提供文件的方法通过肯定的用户操作上传;处理上传的文件，然后继续申请。
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
