参考:https://blog.csdn.net/liguodong456/article/details/83038619
HTML
<div>
<h2>文本:</h2>
<input type="file" id="file-text" accept="*" />
</div>
<div>
<h2>二进制:</h2>
<input type="file" id="file-bin" accept="*" />
</div>
<div>
<h2>图像:</h2>
<input type="file" id="file-image" accept="image/*" />
</div>
<div id="file-result" style="white-space: pre;"></div>
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 = '<img src="' + reader.result + '" style="width: 100%;" />'
};
}
}
隐私政策和规则
点击此处查看详情
转载说明
欢迎任何网络媒体和网站转载本站的内容,转载时请注明作者和博客文章链接。
其他说明
本站部分内容可能已过时,仅供参考,请留意内容发布日期。