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

 更新时间:2020-08-02 16:08:32   作者:佚名   我要评论(0)

本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下
效果展示:

源码展示:


<!doctype html>
<html>
<head>
<meta c

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

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

您可能感兴趣的文章:

  • JS实现上传图片的三种方法并实现预览图片功能
  • js实现图片上传并预览功能
  • Servlet+Jsp实现图片或文件的上传功能具体思路及代码
  • js实现上传图片预览的方法
  • 上传图片预览JS脚本 Input file图片预览的实现示例
  • js实现图片上传并正常显示
  • JS中使用FormData上传文件、图片的方法
  • 微信JSSDK上传图片
  • js实现上传图片之上传前预览图片
  • Javascript图片上传前的本地预览实例

相关文章

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

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

    本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta c
    2020-08-02
  • django下创建多个app并设置urls方法

    django下创建多个app并设置urls方法

    1、创建第二个app 假设我们项目P下面已经有了一个默认的app,名字是app1。现在我想创建第二个app,名字时app2。 进入pychram下的Terminal中,运行命令: pytho
    2020-08-02
  • 基于opencv实现简单画板功能

    基于opencv实现简单画板功能

    OpenCV提供了很多简单的语句,实现复杂的功能,根据颜色和鼠标交互的基础语句,我们可以建立一个简单的画板。尽管它简单,但是制作的框架步骤不能少。 如果您感兴趣
    2020-08-02
  • 原生js+canvas实现贪吃蛇效果

    原生js+canvas实现贪吃蛇效果

    本文实例为大家分享了canvas实现贪吃蛇效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: 页面布局展示:worm.html <!DOCTYPE html> <html> <he
    2020-08-02
  • flask开启多线程的具体方法

    flask开启多线程的具体方法

    在我之前解释了flask如何支持多线程主要通过两个类来实现,LocalStack和Local,在Local中有两个属性,__storage__和__ident_func__,后者用来获取线程id,从而区分不同线
    2020-08-02
  • Python改变对象的字符串显示的方法

    Python改变对象的字符串显示的方法

    问题 你想改变对象实例的打印或显示输出,让它们更具可读性。 解决方案 要改变一个实例的字符串表示,可重新定义它的 __str__() 和 __repr__() 方法。例如: c
    2020-08-02
  • Android入门计算器编写代码

    Android入门计算器编写代码

    这个简易计算器是我按照一本android开发入门书学的,书上的第一个例子就是计算器的编写。计算器的编写主要涉及到按键的布局和按键输入要点。 一个总的Lnearlayout的
    2020-08-02
  • javascript实现京东登录显示隐藏密码

    javascript实现京东登录显示隐藏密码

    本文实例为大家分享了javascript仿京东登录显示隐藏密码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
    2020-08-02
  • JavaScript实现动态生成表格

    JavaScript实现动态生成表格

    本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下 功能描述 在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下
    2020-08-02
  • Python接收手机短信的代码整理

    Python接收手机短信的代码整理

    python解决接口测试获取手机验证码问题的方法: Android在收到短信后会发送一个Action为android.provider.Telephony.SMS_RECEIVED的广播,所以我们只需要写个类继承
    2020-08-02

最新评论