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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
搞定immutable.js详细说明
May 02 Javascript
javascript 用函数实现继承详解
May 28 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
深入浅析React中diff算法
May 19 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
ADODB的数据库封包程序库
2006/12/31 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
layui表格实现代码
2017/05/20 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
基于python的字节编译详解
2017/09/20 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python实现手机销售管理系统
2019/03/19 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
PHP面试题集
2016/12/18 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
颐和园导游词
2015/01/30 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
道歉短信大全
2015/05/12 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
课改心得体会范文
2016/01/25 职场文书
社区结对共建协议书
2016/03/23 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
详解Python中*args和**kwargs的使用
2022/04/07 Python