当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现点击上传图片并设为模糊背景

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

2020年08月03日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网