Question

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

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

Answer 1

正如我在评论中提到的，只要浏览器具有适当的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);

Answer 2

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

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

Answer 3

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

所以如果不将它上传到服务器，你就无法获取该文件的内容（更新：实际上你可以这样做，所以这只是一个建议）

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

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

使用ajax发送它并将其内容作为easy脚本的响应获取，如下所示：

<?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。现在，您可以使用xmlDoc var来访问xml内容，就像简单的DOM文档一样。

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

3 个答案: