用上传的XML文件填充HTML5输入字段 [英] Fill HTML5 Input Fields with Uploaded XML File

问题描述

我建立了一个基于用户提供的数据执行相当复杂的数学计算的HTML5 / JS Web应用程序。应用程序通过在用户手动输入信息的几个不同的输入字段中工作，然后提交处理。用户输入的大部分信息不会经常改变（但是在硬编码的情况下经常是不经济的），而且我有兴趣查看是否有一种方法允许用户上传所有的XML文件为每个用户量身定制所需的数据。这些字段将被自动填充。用户可以根据需要更改其特定的XML文件，以反映新值，然后才能获得新的计算结果。正如旁白一样，任何服务器端不是一个选项。

有可能使用HTML5 / JS上传XML文件，读取文件内容并填充输入字段自动？正如我在我的评论中提到的，你可以在没有任何服务器端干预的情况下完成这个任务，只要浏览器有适当的File API和FileReader支持。假设你有一个文件输入元素，用户可以在这里选择其中一个XML文件：

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

$ b

  var fileChooser = document.getElementById（'fileChooser'） ; 
 
 function parseTextAsXml（text）{
 var parser = new DOMParser（），
 xmlDom = parser.parseFromString（text，text / xml）; 
 
 //现在，从xmlDom中提取项目并分配给合适的文本输入字段
} 
 
函数waitForTextReadComplete（reader）{
 reader.onloadend =函数（事件）{
 var text = event.target.result; 
 
 parseTextAsXml（text）; 
 
 
 $ b函数handleFileSelection（）{
 var file = fileChooser.files [0]，
 reader = new FileReader（）; 
 
 waitForTextReadComplete（reader）; 
 reader.readAsText（file）; 
} 
 
 fileChooser.addEventListener（'change'，handleFileSelection，false）; 
  

I built an HTML5/JS web application that performs fairly complicated mathematical calculations based on user-provided data. The application works by having several different input fields where users manually type in the information, then submit it for processing. Much of the information that the users input will not change very often (but often enough where hard-coding it would not be economical), and I was interested in seeing if there was a way to allow users to upload XML files with all of the required data custom tailored to each user. The fields would be filled automatically. The user would change their particular XML file as needed to reflect new values prior to getting new computations. Just as an aside, anything server-side is not an option.

Is it possible using HTML5/JS to upload an XML file, read the file contents, and fill input fields automatically?

解决方案

As I mentioned in my comment, you can accomplish this task without any server-side intervention, provided the browser has proper File API and FileReader support.

Let's say you have a file input element, where your user will select one of these XML files:

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

Now, you can access whatever file the user selects, grab the associated text/XML, parse it, and assign the values to text input fields on your page. Your code would look something like this:

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);

这篇关于用上传的XML文件填充HTML5输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！