1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 </head> 6 <body> 7 8 <div> 9 头像： 10 <label for="file"><img style=" 20px;" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2790581511,3561251597&fm=58"></label> 11 <input type="file" name="" id="file" style="display: none;"> 12 </div> 13 14 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 15 <script> 16 // 找到头像的input标签绑定事件 17 $("#file").on("change", function(){ 18 // 创建一个读取文件的对象 19 var fileReader = new FileReader(); 20 // 读取选择的文件 21 fileReader.readAsDataURL(this.files[0]); 22 // 等待文件读取完毕 23 fileReader.onload = function(){ 24 // 更改img的src属性 25 $("img").attr("src", fileReader.result); 26 }; 27 }) 28 </script> 29 </body> 30 </html>