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="width: 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>上传头像
原文地址：https://www.cnblogs.com/changwoo/p/9568431.html