<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            position: relative;

            overflow: hidden;

            background: #EEE;

            width: %;

            height: 667px;

        }

        #bg, #mask-bg {

            position: absolute;

            width: %;

            height: 667px;

            background-size: cover;

        }

        #mask-bg{

            top:9px;

            mask-image: url(mask.png);

            -webkit-mask-image: url(mask.png);

        }

        input {

            height: 60px;

            margin-top: 20px;

        }

    </style>

</head>

<body>

<div>

    <p id="bg"></p>

    <p id="mask-bg"></p>

</div>

<input type="file">

<script>

    var input = document.querySelector('input'),

        bg = document.querySelector('#bg'),

        maskBg = document.querySelector('#mask-bg');

    input.onchange = function () {

        var src = getObjectURL(this.files[]);

        setBg(src);

    };

    function setBg(src){

        bg.style.backgroundImage = 'url(' + src + ')';

        maskBg.style.backgroundImage = 'url(' + src + ')';

    }

    /**

     * 通过选择的文件获取其图片路径（blob）

     * @param file

     * @returns {*}

     */

    function getObjectURL(file) {

        var url = null;

        console.log(window.createObjectURL)

        console.log(window.URL)

        if (window.createObjectURL != undefined) {

            url = window.createObjectURL(file)

        } else if (window.URL != undefined) {

            url = window.URL.createObjectURL(file)

        } else if (window.webkitURL != undefined) {

            url = window.webkitURL.createObjectURL(file)

        }

        return url

    }

</script>

</body>

前端模拟 图片上传---->>通过选取的图片获取其路径<<------的更多相关文章

  1. javaweb图片上传 tomcat重新部署 图片消失

      标签: 图片上传tomcat重新部署图片消失原因分析以及解决办法 最近在做一个Javaweb的项目,涉及到图片上传,并且需要将图片通过URL回显给JSP页面,在调试的时候发现,上传到tomcat的 ...

  2. 从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  3. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  4. 大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)

    一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) publ ...

  5. ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  6. nginx代理图片上传以及访问 nginx 图片上传完整版

    nginx代理图片上传 首先需要利用nginx代理图片访问参考 https://www.cnblogs.com/TJ21/p/12609017.html 编写接受文件的controller 1 @Po ...

  7. vue图片上传及java存储图片(亲测可用)

    1.前言 在使用elementui的upload组件时,我一直无法做到上传的图片和其他数据一起提交.单纯的上传文件,java的存储图片的方式也有局限性. 我知道的后端保存图片有两种方式:一种是直接存储 ...

  8. dnmp(docker的lnmp)安装WordPress之后图片上传问题 问题：图片上传大小问题解决和 报错413 Request Entity Too Large

    首先是提示超过图片尺寸和大小, 最后发现都是图片大小的问题, 需要修改php的最大上传size 修改之后查看php配置  已经生效  但是还是报错, 提示返回不是合法的json,  查看控制台, 报错 ...

  9. JS判断图片上传时文件大小和图片尺寸

    如何读取图片的size: 首先,原生input file控件有个files属性,该属性是一个数组.数组中的元素有以下属性:lastModifiedDate,name,size,type,webkitR ...

随机推荐

  1. STM32用JLINK 烧写程序时出现NO Cortex-m device found in JTAG chain现象和解决方案

    现象 CPU: STM32107VC 用JLINK 烧写程序时出现NO Cortex-m device found in JTAG chain 如图无法查找到硬件就是CPU 提示1:NO Cortex ...

  2. bzoj1078【SCOI2008】斜堆

    题意: 斜堆(skew heap)是一种常用的数据结构.它也是二叉树,且满足与二叉堆相同的堆性质:每个非根结点的值都比它父亲大.因此在整棵斜堆中,根的值最小.但斜堆不必是平衡的,每个结点的左右儿子的大 ...

  3. CUDA[2] Hello,World

    Section 0:Hello,World 这次我们亲自尝试一下如何用粗(CU)大(DA)写程序 CUDA最新版本是7.5,然而即使是最新版本也不兼容VS2015 ...推荐使用VS2012 进入VS ...

  4. 安装第三方RPM仓库

    1.安装RepoForge源: CentOS 6.x [root@localhost /]# yum install http://pkgs.repoforge.org/rpmforge-releas ...

  5. 【Beta】Scrum07

    Info 由于编译考试,会议记录推迟发布.18~19两天工作暂停:同时由于有组员外出不在学校,本次会议采用线上会议形式 时间:2016.12.17 21:35 时长:15min 地点:讨论组 类型:线 ...

  6. python学习笔记（二）

    (一)模块打包     --->        注:suba和subb文件夹下的__init__.py文件,即使为空,也必须存在 "setup.py" from distut ...

  7. Markdown与标记语言

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...

  8. Tlist删除技巧

    二.    从TList开始分析-- 为了写一个更好的性能ISAPI Filter,我需要更快速地从TList中删除部分连续的Item.比如这样的一段代码: var p : pChar = 'abcd ...

  9. nginx-1.8.0 rpm包制作

    1.安装rpm-build # yum install rpm-build 2.创建制作RPM包目录 # cat /root/.rpmmacros %_topdir /root/rpmbuild %_ ...

  10. 检查Linux服务器性能

    如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在? 概述通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. • uptime• ...