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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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);
});
};
};

以下是演示,蛮好玩的