FileReader方法：
FileReader提供的一些完整的事件：
实例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--实现图片的实时预览 onchange改变元素后触发方法--> <from> 文件: <input type="file" name="myFile" id="myFile" multiple onchange="getFileContext()"><br> <img id="img"><br> <input type="submit"> </from> <script> function getFileContext() { var reader=new FileReader(); //需要的参数是图片 var file=document.querySelector("#myFile").files; // 没有返回值，将其结果储存在result中，无法判断文件是否读完 reader.readAsDataURL(file[0]); reader.onload=function () { // 展示出来：得到的reader.result为二进制文件base64 data:image/jpeg;base64... console.log(reader.result); document.querySelector("#img").src=reader.result; } } </script> </body> </html>
这里是巧妙利用onchange触发改变事件，当前元素有改变时候触发。
reader.readAsDataURL(file[0]);是将得到的值转为dom操作对象。
原文：https://www.cnblogs.com/ys15/p/10706576.html