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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
ES6的新特性概览
Mar 10 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
javascript流程控制语句集合
Sep 18 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
vue实现登录功能
Dec 31 Vue.js
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
SONY ICF-F10中波修复记
2021/03/02 无线电
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
28个JS验证函数收集
2010/03/02 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
对Python3 序列解包详解
2019/02/16 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
实习生自荐信范文
2013/11/13 职场文书
承认错误的检讨书
2014/01/30 职场文书
班组长岗位职责
2014/03/03 职场文书
文明村镇申报材料
2014/05/06 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
广告学专业求职信
2014/06/19 职场文书
2016银行求职自荐信
2016/01/28 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python