JS文件操作介绍
本文将介绍前端浏览器支持的JS文件操作技术。相关权威技术资料
带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择一个或多个文件。<input type="file"> - HTML（超文本标记语言） | MDN
FileReader 是HTML5新增的，其中FileReader API负责读取文件内容，FileSystem API负责本地文件系统的有限操作。FileReader - Web API 接口参考 | MDN
Node.js 中的文件系统，功能强大，Node.js是服务端网页编程技术，需要安装，在此也不涉及，可参见其官网的相关部分File system | Node.js v19.2.0 Documentation
Node.js 提供额外的 API 用于支持在无浏览器环境中有用的功能，例如，创建 HTTP 服务器并访问文件系统，但不支持 DOM。
【特别提醒新手注意，ActiveXObject对象和FileSystemObject 对象仅在IE浏览器中实现文件的操作功能，微软已于2021年停止支持IE浏览器，本文也不再涉及这些淘汰技术】
显示图片方面的应用
HTML页面显示图片比较简单，html显示图片的基本方法：使用img标签，语法“<img src="图片文件地址" /> ”；
使用img标签插入图片
在HTML中，可以使用img 元素向网页中嵌入一幅图像。示例源码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title> 测试</title>
</head>
<body>
<img src="./雪.png" width="250"/>
</body>
</html>
保存文件名为：图片.html，用浏览器打开显示效果如下：
这样的方法，图片不能更换，如何由用户打开对话框选定定呢？这就需要JS文件操作技术了。
带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择文件。示例源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>files-h5</title>
</head>
<body>
<input type="file" id="file" onchange="showPreview(this, 'portrait')" />
<img src="" id="portrait" style="width: 200px; display: block;" />
<script>
function showPreview(source, imgId) {
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
document.getElementById(imgId).src = e.target.result;
}
fr.readAsDataURL(file);
}
}
</script>
</body>
</html>
保存文件名为：选定显示图片.html，用浏览器打开显示效果如下：
待续
