js中的FileReader结合input:file可以很方便的读取本地文件。不过要知道FileReader读取文件采用的是异步机制。
先来了解下input的file文件类型的使用：
<input type="file" id="myimg"/>
input的file类型在浏览器中会渲染为一个按钮和一段文字。当你点击按钮时会打开文件选择窗口，文字表示对文件的描述；如图：
file类型的input会有files属性，保存着文件的相关信息。现在通过如下代码，打印其属性：
<div>
<!--accept只能与file配合使用。它可以限制上传的文件类型
当然你也可以写成 accept="image/*"-->
<input type="file" id="myimg"
onchange="imgChange(this)"
accept="image/png,image/gif,image/jpeg"/>
</div>
<script>
function imgChange(img) {
console.log(img.files)
}
</script>
以上代码通过accept属性可以控制文件的上传类型。现在上传一张名为zhangpeiyue.png的图片，效果及打印信息如下：
通过以上输出可知input.files是一个数组。每个file对象包含以下属性：
lastModified：数值，表示最后一次修改时间的毫秒数；
lastModifiedDate：对象，表示最后一次修改时间的Date对象。
name：本地文件系统中的文件名；
size：文件的字节大小；
type：字符串，文件的MIME类型；
weblitRelativePath：此处为空；当在input上加上webkitdirectory属性时，用户可选择文件夹，此时weblitRelativePath表示文件夹中文件的相对路径。该属性可自行尝试，哈！
FileReader
使用方法：
// 通过构造函数初始化一个FileReader对象
const reader = new FileReader();
常用事件:
// 事件在读取完成后触发。
FileReader.onload=function(ev){
}
常用方法:
// 开始读取指定的的内容。
// 一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
FileReader.readAsDataURL();
接下来完成图片的转base64并预览效果：
html:
<!--accept只能与file配合使用。它可以限制上传的文件类型
当然你也可以写成 accept="image/*"-->
<div>
<input type="file" id="myimg"
onchange="imgChange(this)"
accept="image/png,image/gif,image/jpeg"/>
<img width="300px" src="" alt="">
</div>
js:
function imgChange(img) {
// 生成一个文件读取的对象
const reader = new FileReader();
reader.onload = function (ev) {
// base64码
var imgFile =ev.target.result;//或e.target都是一样的
document.querySelector("img").src= ev.target.result;
}
//发起异步读取文件请求，读取结果为data:url的字符串形式，
reader.readAsDataURL(img.files[0]);
}
