让用户在客户端上打开一个xml文件并使用javascript解析它 [英] letting user open an xml file on client and parse it using javascript
问题描述
我正在尝试让我网站上的用户将XML文件保存到本地计算机，然后再使用HTML文件元素加载它们。
I'm trying to let a users on my site to save and XML file one the local machine and then later to load them using the HTML file element.
保存文件使用iFrame完成的操作。
Saving the file what done with iFrame.
当试图让用户加载文件时，我一直都会遇到异常。
我已经尝试过我能在网上找到的所有东西，而且似乎无法找到方法。
When trying to let the user load the file i am getting exceptions all the time. I've tried every thing i could find over the web and can't seem to find the way to do it.
我得到各种各样的异常，如跨域或 XMLHttpRequest无法加载file：/// C：/fakepath/Regions.xml。只有HTTP支持跨源请求。
取决于我尝试的代码。
I am getting all kind of exception, like cross domain or XMLHttpRequest cannot load file:///C:/fakepath/Regions.xml. Cross origin requests are only supported for HTTP. Depending on the code i tried.
我读到HTML5标准用fakepath替换url ，并没有找到解决方案。有没有办法让用户从他自己的计算机加载文件进行编辑？ 从服务器加载特定文件不是问题，但我想给用户这个自由，而不是决定加载哪个文件，还让他们在他们的计算机而不是服务器上保存和加载xml
I read that HTML5 standard replace the url with "fakepath", and can't find solution for this. Is there no way to let the user load a file from his own computer to be edited? loading a specific file from server is not a problem but i want to give this freedom to the user and not decide for them what file to load, and also to let them save and load the xml on their computer and not the server
这个问题是否有解决方案？
Is there a solution for this problem?
找到此代码但没有帮助（和我已经尝试了很少的其他验证）：
Found this codes but neither helped (and I've tried few other veriations of this):
1）
var error = "";
strFile = document.frmLoadFile.selectedFile.value;
intPos = strFile.lastIndexOf("\\");
strDirectory = strFile.substring(0, intPos);
//alert(strDirectory);
document.frmLoadFile.selectedFile.value = strDirectory;
var file = 'file:\\\\\\' + document.frmLoadFile.selectedFile.value;
try //Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(file);
}
catch (e) {
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(file);
}
catch (e) {
try //Google Chrome
{
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
}
catch (e) {
error = e.message;
}
}
}
2）
var xmlDoc;
var xmlloaded = false;
function xml_initLibrary(file) {
importXML(file);
}
function importXML(xmlfile) {
try {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlfile, false);
}
catch (Exception) {
var ie = (typeof window.ActiveXObject != 'undefined');
if (ie) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
while (xmlDoc.readyState != 4) { };
xmlDoc.load(xmlfile);
xmlloaded = true;
readXML();
}
else {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = readXML;
xmlDoc.load(xmlfile);
xmlloaded = true;
}
}
if (!xmlloaded) {
xmlhttp.setRequestHeader('Content-Type', 'text/xml')
xmlhttp.send("");
xmlDoc = xmlhttp.responseXML;
xmlloaded = true;
readXML();
}
}
function readXML() {
//console.log(xmlDoc);
}
是否有人知道是否有办法解决这个问题？你需要在服务器上保存这些文件吗？
does any one knows if there is a way to fix this? of do you need to save the files on the server?
非常感谢你们所有
Erez
Thank you all very much Erez
推荐答案
我认为您正在寻找 FileReader ， HTML5中的新功能。对于IE< 10您需要使用 ActiveX FileSystemObject 。
I think you're looking for FileReader, new in HTML5. For IE < 10 you'll need to use the ActiveX FileSystemObject.
此代码适用于Chrome。
This code works for me on Chrome.
<script type="text/javascript">
function doit(e) {
var files = e.target.files;
var reader = new FileReader();
reader.onload = function() {
var parsed = new DOMParser().parseFromString(this.result, "text/xml");
console.log(parsed);
};
reader.readAsText(files[0]);
}
document.getElementById("selectfile").addEventListener("change", doit, false);
</script>
<input type="file" id="selectfile" />
这篇关于让用户在客户端上打开一个xml文件并使用javascript解析它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
