<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. iOS中富文本NSMutableAttributedString的用法

    NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc]initWithString:@"我是富文 ...

  2. C#面向对象设计模式纵横谈——6.Prototype 原型模式(创建型模式)

    动机(Motivation) 在软件系统中,经常面临着“某些结构复杂的对象”的创建工作.由于需求的变化,这些对象经常面临着剧烈的变化,但他们却拥有比较稳定一致的接口. 如何应对这种变化?如何向“客户程 ...

  3. Pitfalls: C++ 中的index运算符

    名可名, 非常名 在调一个题目的过程中发现了一个之前从未意识到的问题. 考虑如下代码 vector<int> a; int f(int x){ a.push_back(x); return ...

  4. CSS样式基础总结

    首行缩进:text-indent:2em 行高:line-height:1.5em 1.5倍行距 也可以设置像素文字修饰:text-decoration:underline下划线 line-throu ...

  5. Theano printing

    Theano printing To visualize the internal relation graph of theano variables. Installing conda insta ...

  6. C#之类的使用

    属性与字段的使用类似iOS class Class1 { //字段私有,属性公有 private string _name; private int _age; /*control + r -> ...

  7. webstorm卡顿问题

    近期随着项目开展,文件逐渐增大,webstrom频繁出现卡顿,而且时有崩溃现象,提示没有足够的内存来执行请求的操作,需要增加Xms设置. 解决办法: 1.找到WebStorm.exe.vmoption ...

  8. [Unreal]学习笔记之灯光说明

    利用灯光通道,实现局部照亮效果 没有更改Channel之前的效果: 需要将网格物体设置为可移动 将灯光和被照亮物体的Channel设置为同样并且非0零: 设置成功后,就可以实现局部照亮

  9. Hibernate配置方式

    Hibernate配置方式 Hibernate给人的感受是灵活的,要达到同一个目的,我们可以使用几种不同的办法.就拿Hibernate配置来说,常用的有如下三种方式,任选其一. 在 hibernate ...

  10. window 使用vagrant搭建开发开发环境

    # -*- mode: ruby -*-# vi: set ft=ruby : # All Vagrant configuration is done below. The "2" ...