1

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

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

4

3 回答 3

7

正如我在评论中提到的，只要浏览器具有适当的 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-30T19:51:28.327 回答
-1

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

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

于 2013-06-29T07:57:20.923 回答
-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 而言，这个解决方案可以工作。

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

于 2013-06-29T00:49:37.133 回答