javascript - 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 的大小以匹配内容。我有这个功能，但是我需要有一种方法，用用户<input>之前在标签中提供的某些值替换 iframe 中的文本。例如，我需要能够将用户提供的文件中的“[c1]”替换为客户的名称，例如“John Smith”。

我更喜欢这样做的方式是通过文件本身的内容，而不是使用 iframe 中的源或对象中的数据。如果我可以将它放入可以编辑的原始文件本身，那将解决问题。

我需要能够在不使用 jQuery 或其他插件的情况下做到这一点，因为这是一个本地文件，应该能够作为我的客户端的工具独立工作。

标签： javascripthtml

Answer 1

使用 DOMParser 解析阅读器的结果：

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

或任何其他 mime 类型，然后，根据您提到的输入更新文档中的一些节点。然后使用 iframecontentDocument来采用节点 using document.adoptNode。这将返回其 ownerDocument 指向 iframe 的节点。最后将其附加到 iframe 的正文中。