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的主体上。