js实现点击上传图片并设为模糊背景

本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下效果展示:源码展示:<!doctype

本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下

效果展示:

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

源码展示:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7061.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注