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

Question

我构建了一个 HTML5/JS 网络应用程序，它根据用户提供的数据执行相当复杂的数学计算。该应用程序的工作原理是有几个不同的输入字段，用户可以在这些字段中手动输入信息，然后将其提交进行处理。用户输入的大部分信息不会经常更改(但在硬编码不经济的情况下经常更改)，我很想知道是否有一种方法允许用户上传包含所有这些信息的 XML 文件为每个用户量身定制的所需数据。这些字段将自动填充。用户将根据需要更改他们的特定 XML 文件以在获得新计算之前反射(reflect)新值。顺便说一句，任何服务器端都不是一种选择。

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

Answer 1

正如我在评论中提到的，您可以在没有任何服务器端干预的情况下完成此任务，前提是浏览器具有适当的文件 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);