效果:
代码:
<html> <head> <title>尝试</title> <script src="js/jquery.js"></script> </head> <body> <div class="layui-form-item"> <label class="layui-form-label">图片地址</label> <div class="layui-input-block"> <input type="hidden" id="img_url"> <input type="file" onchange="showImg()" id="img_file"><img src="" alt="" id="img_id" style=" 100px"> </div> </div> </body> </html> <script type="text/javascript"> function showImg() { var file = document.getElementById('img_file').files[0]; var re = new FileReader(); re.readAsDataURL(file); re.onload = function(re) { console.log(re) $('#img_id').attr("src", re.target.result); } } </script>