js实现点击上传图片并设为模糊背景
更新时间：2020年08月02日 14:55:37 作者：Mr.王征
这篇文章主要为大家详细介绍了js实现点击上传图片并设为模糊背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解CommonJS和ES6模块循环加载处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
复制到剪贴板的实现方法有很多，在本文将为大家详细介绍下使用js是如何实现的，感兴趣的朋友不要错过2013-10-10
这篇文章主要介绍了JavaScript逻辑Not运算符，逻辑NOT运算符与C和Java中的逻辑 NOT 运算符相同，都由感叹号（!）表示，想要深入了解逻辑Not运算符的朋友可以参考一下2015-12-12
JavaScript中的this陷阱的最全收集并整理(没有之一)
这篇文章主要介绍了JavaScript中的this陷阱的最全收集,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了videojs添加自定义组件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了npm qs模块使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了javascript实现输入框内容提示及隐藏功能,实现方法真的超简单，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2021-09-09
本文通过实例代码给大家介绍了js中的attr的用法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-10-10
今天小编就为大家分享一篇关于使用javascript做时间倒数读秒功能的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JavaScript中数组添加值和访问值常见问题的相关资料2016-02-02
最新评论