溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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 >
感： 最近貢獻一下我在教學中的小案例可以能給你一些幫助
希望繼續關注我的博客
--王
</pre>
</body>
</html>看完上述內容，是不是對js如何實現點擊上傳圖片并設為模糊背景有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
