html5在线浏览文档,HTML5 使用 FileReader 读取并预览文件内容

HTML

文本：

二进制：

图像：

JavaScript

/* 选择文件 */

var fileText = document.querySelector("#file-text");

var fileBinary = document.querySelector("#file-bin");

var fileImage = document.querySelector("#file-image");

/* 结果 */

var fileResult = document.querySelector("#file-result");

/* 检测是否支持 FileReader */

if (typeof (FileReader) === "undefined") {

fileResult.innerHTML = "您的浏览器不支持 FileReader";

} else {

var reader = new FileReader();

fileText.onchange = function () {

var file = fileText.files[0];

reader.readAsText(file, "utf-8"); // 将文件以 UTF-8 编码读取为文本

reader.onload = function () {

fileResult.innerHTML = reader.result;

}

}

fileBinary.onchange = function () {

var file = fileBinary.files[0];

reader.readAsBinaryString(file);

reader.onload = function () {

fileResult.innerHTML = reader.result;

}

}

fileImage.onchange = function () {

var file = fileImage.files[0];

reader.readAsDataURL(file);

reader.onload = function () {

fileResult.innerHTML = ''

}

}

}