<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1 class="text-center">注册</h1> <hr> <form id="myform" novalidate> <div class="form-group"> <label for="id_file">头像 <img src="default.jpg" alt="" width="80" style="margin-left: 20px" id="id_img"> </label> <input type="file" name="myfile" id="id_file" class="hidden"> </div> </form> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $("#id_file").change(function () { // 获取文件对象 var fileObj = $(this)[0].files[0]; // 利用内置对象 文件阅读器 FileReader var fileReader = new FileReader(); // 将文件对象交给文件阅读器 生成文件对象的二进制数据 fileReader.readAsDataURL(fileObj); // 异步 // DOM操作 修改img标签的src属性值 fileReader.onload = function (){ $('#id_img').attr('src',fileReader.result) }; }); </script> </body> </html>
js实现上传图片动态展示在页面上
猜你喜欢
转载自www.cnblogs.com/yinyitianya/p/11694179.html
今日推荐
周排行