js實現點選上傳圖片並設為模糊背景
阿新 • • 發佈:2020-08-03
本文例項為大家分享了js實現點選上傳圖片,同時設該圖片為模糊背景,供大家參考,具體內容如下
效果展示:
原始碼展示:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js實現點選上傳圖片,同時設該圖片為模糊背景</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> input { display:block; margin:0 auto; opacity:0; position:absolute; width:100%; height:100%; top:0; z-index:10; cursor:pointer; } p { font-size:14px; line-height:100px; position:absolute; top:0; left:8px; z-index:5; margin:0; } form { margin:0; } .box { width:100px; height:100px; border:1px solid #f60; border-radius:50px; margin:0 auto; overflow:hidden; position:relative; text-align:center; } .big-box { width:100%; height:250px; position:relative; margin-top:10px; overflow:hidden; padding-top:150px; border:1px solid #000000; } .bg-img { position:absolute; width:100%; -webkit-filter:blur(50px); z-index:-1; top:0; } img { width:100%; } </style> </head> <body> <div class="big-box"> <img id="imgPre" src="" class="bg-img"> <form action=""> <div class="box"> <img id="imgPre_1" src=""> <p>點選上傳圖片</p> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');"> </div> </form> </div> <script> /** * 從 file 域獲取 本地圖片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE url = document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; }; /** * 將本地圖片 顯示到瀏覽器上 */ function preImg(sourceId,targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; imgPre_1.src = url; }; $(function() { $('input').click(function() { $('p').hide(); }); }); </script> <pre style="color:red"> 感: 最近貢獻一下我在教學中的小案例可以能給你一些幫助 希望繼續關注我的部落格 --王 </pre> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。