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 面向对象 命名空间
May 13 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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中的count函数
2016/05/31 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python基于select实现的socket服务器
2016/04/13 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python程序变成软件的实操方法
2019/06/24 Python
Python常用库大全及简要说明
2020/01/17 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
生产部统计员岗位职责
2014/01/05 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
员工安全责任协议书
2016/03/22 职场文书