input标签上传HTML文件+显示出页面来

今天无意间在慕课网上看到这么一则问题，要求使用 input 标签上传html文件并同时将其显示在页面上（不是文件内容，而是渲染好的页面）

总共分为两个步骤

用浏览器拿到文件内容
将文件内容变成页面

完成第一个任务就使用 input 标签的文件上传功能就好了，那第二个任务如何完成呢？

记得以前好奇看过一些在线前端代码展示工具，它们基本上都是用 iframe 标签实现对用户输入的代码对应的页面的显示的，那我也可以这么弄，对于它的 src 的值，我用h5新的 Blob 对象将文件内容变成一个blob地址就可以了

下面的javascript代码不是我写的，是从网上复制一个实现读取文件内容的代码改的，见此Javascript读取文件内容到文本框，而对Blob的操作的代码复制于此HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换，就是将链接加到iframe上的代码是我自己写的23333

1
2
3

<input type="file" name="upload" id="upload" />
<hr>
<iframe src="" id="iframe"></iframe>

window.onload = function () {
            /**
             * 上传函数
             * @param fileInput DOM对象
             * @param callback 回调函数
             */
            var getFileContent = function (fileInput, callback) {
                if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
                    //下面这一句相当于JQuery的：var file =$("#upload").prop('files')[0];
                    var file = fileInput.files[0];
                    if (window.FileReader) {
                        var reader = new FileReader();
                        reader.onloadend = function (evt) {
                            if (evt.target.readyState == FileReader.DONE) {
                                callback(evt.target.result);
                            }
                        };
                        // 包含中文内容用gbk编码
                        reader.readAsText(file, 'utf-8');
                    }
                }
            };

            /**
             * upload内容变化时载入内容
             */
            document.getElementById('upload').onchange = function () {
                var content = document.getElementById('content');

                getFileContent(this, function (str) {
                    console.log(str);
                    var blob = new Blob([str], {
                        type: 'text/html',
                    })
                    var src = window.URL.createObjectURL(blob);
                    document.getElementById("iframe").setAttribute("src", src);
                });
            };
        };

Schwarzeni