JavaScript FileReader從文件中獲取數據

Question

在互聯網上瀏覽了幾個小時以找到解決方案后，我發現了一些從文件讀取器中獲取信息的方法，但並不是我所需要的。

function submitfile() {
    var reader = new FileReader();
    reader.readAsDataURL(document.getElementById("filesubmission").files[0]);
    reader.onload = function (REvent) {
        document.getElementById("outputcontent").innerHTML = "<iframe width='100%' id='outputdata' scrolling='yes' onload='resizeIframe(this)' src='"+REvent.target.result+"'></iframe>";   
    };
}
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

那是用戶選擇文件后所使用的代碼，我允許使用.html，.htm，.txt或.xml。 然后調整iframe的大小以匹配內容。 我可以使用該功能，但是我需要一種方法來將iframe中的文本替換為用戶先前在<input>標記中提供的某些值。 例如，我需要能夠用用戶名（例如“ John Smith”）替換用戶提供的文件中的“ [c1]”。

我更喜歡這樣做的方法是通過文件本身的內容，而不是在iframe中使用源或在對象中使用數據。 如果我可以將其放入可以編輯的原始文件本身中，則可以解決此問題。

我需要能夠在不使用jQuery或其他插件的情況下執行此操作，因為這是一個本地文件，應能夠作為客戶端的工具獨立運行。

Answer 1

使用DOMParser解析閱讀器的結果：

var doc = (new DOMParser).parseFromString(reader.result,"text/html");

或其他任何MIME類型，然后根據您提到的輸入來更新文檔中的某些節點。 然后，使用iframe的contentDocument通過document.adoptNode采納節點。 這將返回帶有其ownerDocument指向iframe的節點。 最后，將其附加到iframe的主體上。