使用上传的XML文件填充HTML5输入字段

我构建了一个基于用户提供的数据执行相当复杂的数学计算的HTML5/JS Web应用程序。该应用程序通过在用户手动键入信息时提供几个不同的输入字段，然后提交它进行处理。用户输入的大部分信息不会经常更改（但在硬编码时经常不够经济），我有兴趣查看是否有方法允许用户上传带有所有为每个用户量身定制所需的数据。这些字段将被自动填充。用户将根据需要更改其特定的XML文件，以在获得新计算之前反映新值。就像旁边一样，任何服务器端都不是一种选择。使用上传的XML文件填充HTML5输入字段

是否可以使用HTML5/JS上传XML文件，读取文件内容并自动填充输入字段？

来源

2013-06-29 user2533653

上传的文件是否必须是XML格式？ –

是的，这是可能的，并且不需要服务器端代码。查看[FileReader]（https://developer.mozilla.org/en-US/docs/Web/API/FileReader）对象（特别是readAsText方法）的文档以获取更多信息。 –

它不一定是XML;这似乎是XML在用户能够在上载之前轻松编辑他们自己的信息并能够轻松地将XML数据映射到他们各自的字段之间的妥协折衷。我也会检查出filereader。 – user2533653

-2

必须反正使用一些服务器端代码，因为JS不允许上传文件，甚至访问用户计算机上

因此，如果不将其上传到服务器，你不能把这个文件的内容（更新：实际上你可以做到这一点，所以这只是一个建议）

但你可以以非常简单的方式做到这一点，例如提交带有文件输入的表单

<form enctype="multipart/form-data" action="/path/to/script" method="post"> 
    <input name="myFile" type="file" /> 
</form>

使用AJAX发送和获取它的内容从简单的脚本，这样的回应：

<?php 
if (!$_FILES["myFile"]["error"]) { 
    header("Content-Type: text/xml"); 
    echo file_get_contents($_FILES["myFile"]["tmp_name"]); 
} 
?>

我使用PHP，但我当然，用另一种语言来执行它并不是问题。当然，我知道在主流浏览器中只有XHR2支持文件上传，但只要您询问关于HTML5 this solution will work的信息。

下一步是成功的处理程序添加到您的Ajax请求

success: function(data) { 
// and parse it 
if (window.DOMParser) 
    { 
    parser=new DOMParser(); 
    xmlDoc=parser.parseFromString(data,"text/xml"); 
    } 
else // Internet Explorer 
    { 
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDoc.async=false; 
    xmlDoc.loadXML(data); 
    } 
}

伟大的教程here。现在，您可以像使用简单的DOM文档一样使用xmlDoc var访问xml内容。

来源

2013-06-29 00:49:37 vladkras

-1

听起来像Saxon-CE应用程序的理想候选者。

但是，我不认为如果没有任何类型的服务器支持，您可以使其工作。你谈论“上传”文件;这意味着上传到服务器，并且您需要在服务器上执行某些操作才能实现这一点。浏览器应用程序无法与本地计算机上的文件存储进行交互，除非您要求用户关闭安全设置，这是不明智的（我甚至不知道这是否可能）。

来源

2013-06-29 07:57:20

如果是谁低估了这个答案（以及来自@vladkras的答案）会解释为什么，那将会很好。如果我的事实错误，我很乐意予以纠正。 –

我倒了两个答案。我已经在我的评论中解释了如何做到这一点。重申，不需要服务器端代码来简单地读取通过文件输入字段提交的XML文件。 –

感谢您参考HTML5 FileReader。我不知道这一点。看来你是这方面的专家...... –

正如我在我的评论中提到的，只要浏览器具有适当的File API和FileReader支持，就可以在没有任何服务器端干预的情况下完成此任务。

比方说，你有一个文件输入元素，你的用户会选择这些XML文件中的一个：

<input id="fileChooser" type="file">

现在，您可以访问任何文件的用户选择，抓取相关的文本/ XML，解析它，并将值分配给页面上的文本输入字段。你的代码看起来像这样：

var fileChooser = document.getElementById('fileChooser'); 

function parseTextAsXml(text) { 
    var parser = new DOMParser(), 
     xmlDom = parser.parseFromString(text, "text/xml"); 

    //now, extract items from xmlDom and assign to appropriate text input fields 
} 

function waitForTextReadComplete(reader) { 
    reader.onloadend = function(event) { 
     var text = event.target.result; 

     parseTextAsXml(text); 
    } 
} 

function handleFileSelection() { 
    var file = fileChooser.files[0], 
     reader = new FileReader(); 

    waitForTextReadComplete(reader); 
    reader.readAsText(file); 
} 

fileChooser.addEventListener('change', handleFileSelection, false);

来源

2013-06-30 19:51:28

使用上传的XML文件填充HTML5输入字段

回答

相关问题