上傳圖片並展示出來
阿新 • • 發佈：2020-07-30
效果：
程式碼：
<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="width: 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>
參考：https://blog.csdn.net/yzwdzkn/article/details/99876499