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


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了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>

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

Javascript 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
python实现微信自动回复功能
2018/04/11 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
使用K.function()调试keras操作
2020/06/17 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
农村面貌改造提升实施方案
2014/03/18 职场文书
服务标语大全
2014/06/18 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
公务员政审材料范文
2014/12/23 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers