<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" name="" id="myimg"><button>上传</button> <script> // 图片预览 let myimg = document.querySelector("#myimg"); myimg.onchange = function(){ // 获取文件对象 console.log(this.files[0]); let file = this.files[0] // 把文件对象转成base64格式 let FR = new FileReader(); FR.readAsDataURL(file); // 把 文件作为 url读取出来 FR.onload = function(){ // 获取读取的结果 console.log(this.result); let imgEle = document.createElement("img"); imgEle.src = this.result; document.body.appendChild(imgEle); } } </script> </body> </html>
标签:FR,预览,let,imgEle,document,myimg,图片 From: https://www.cnblogs.com/wh024/p/17506568.html