<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>upload by form</title> </head> <body> <input type="file" name="avatar" id="avatar" multiple="multiple" /> <img id="img" /> </body> <script> window.onload = () => { const avatar = document.getElementById("avatar"); const img = document.getElementById("img"); avatar.onchange = e => { const file = e.target.files[0]; //创建读取文件的对象 const reader = new FileReader(); //使用该对象读取file文件 reader.readAsDataURL(file); //读取文件成功后执行的方法函数 reader.onload = function(e) { //读取成功后返回的一个参数e，整个的一个进度事件 //选择所要显示图片的img，要赋值给img的src就是e中target下result里面 //的base64编码格式的地址 img.src = e.target.result; }; }; }; </script> </html>