使用上載的XML文件填充HTML5輸入字段

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的要求而言， 這個解決方案是可行的 。

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

這里很棒的教程。 現在，您可以使用xmlDoc var來訪問xml內容，就像簡單的DOM文檔一樣。