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

Fill HTML5 Input Fields with Uploaded XML File

本文关键字：填充 HTML5 输入 字段 文件 XML      更新时间：2023-09-26

我构建了一个HTML5/JS web应用程序，该应用程序基于用户提供的数据执行相当复杂的数学计算。该应用程序的工作原理是有几个不同的输入字段，用户可以在其中手动键入信息，然后提交信息进行处理。用户输入的大部分信息不会经常更改（但在硬编码不经济的情况下，更改的频率就足够了），我很想看看是否有一种方法可以允许用户上传XML文件，其中包含为每个用户定制的所有所需数据。字段将自动填充。在获得新的计算之前，用户将根据需要更改其特定的XML文件，以反映新的值。顺便说一句，任何服务器端的东西都不是一个选项。

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

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

假设您有一个文件输入元素，用户将在其中选择以下XML文件之一：

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

现在，您可以访问用户选择的任何文件，获取相关联的text/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);

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

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

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

所以如果不上传到服务器，你就无法获得这个文件的内容（upd:实际上你可以做到，所以这只是一个建议）

但你可以用一种非常简单的方式来完成，例如提交一份带有文件输入的表格

<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而言，这个解决方案是可行的。

下一步是将成功处理程序添加到您的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); 
  }
}

这里有很棒的教程。现在，您可以使用类似于简单DOM文档的xmlDoc-var来访问xml内容。

相关文章：