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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python正则简单实例分析
2017/03/21 Python
django 自定义过滤器的实现
2019/02/26 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python和c语言哪个更适合初学者
2020/06/22 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python matplotlib库的基本使用
2020/09/23 Python
python中的测试框架
2020/11/13 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
毕业生自荐书
2014/02/03 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
2016年情人节问候语
2015/11/11 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL