圖片上傳了瀏覽器 預覽
阿新 • • 發佈：2020-08-28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <script src="../../includes/js/jquery-3.3.1.min.js?v=1856"></script> <title>上傳圖片預覽</title> <style> .settle-box3 .upload .uploadimg-2{ position: absolute; top: 0; left: 0; right: 0; z-index: 50; } .settle-box3 .upload{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; margin-bottom: 30px; } .upinimg{ position: absolute; left: 0; top: 0; opacity:0; } .upload-img1-label{ position: relative; overflow: hidden; display: inline-block; width: 100%; height: 100%; } </style> </head> <body> <div class="settle-box3" id="lawyer-settle"> <div class="upload"> <div class="upload-item-box"> <div class="upload-item text-center mt-3"> <label for="upload-img4" class="upload-img1-label"> <img class="img img2" src="../../includes/image/shizi.png" alt=""> <img class=" uploadimg-4" src="" alt=""> <input type="file" class="upinimg" id="upload-img4" onchange="showPreview(this,4)"> </label> </div> </div> </div> </div> <script> //圖片預覽的 function showPreview(source,num){ var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { $(`.settle-box3 .upload .upload-item .uploadimg-${num}`).attr("src",e.target.result); $(`.settle-box3 .upload .upload-item .uploadimg-${num}`).css("width","100%") $(`.settle-box3 .upload .upload-item .uploadimg-${num}`).css("height","100%") }; fr.readAsDataURL(file); } } </script> </body> </html>