js實現點擊上傳圖片并設為模糊背景

更新時間：2020年08月02日 14:55:37 作者：Mr.王征

這篇文章主要為大家詳細介紹了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">
 感： 最近貢獻一下我在教學中的小案例可以能給你一些幫助
    希望繼續(xù)關注我的博客
 
                  --王
</pre>
 
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: