<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. strchr()函数 和 strrchr() 函数

    strchr 定义于头文件 <string.h>char *strchr( const char *str, int ch );寻找ch(按照如同(char)ch的方式转换成char后)在 ...

  2. 彻底理解session

    最详细的对session的解析: https://www.tooto.cc/archives/178

  3. ThinkPhp 3.2 自动验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 数据验证有两种方式: 静态方式:在模型类里面通过$_validate属性定义验证规则 ...

  4. p/invoke碎片--对数组的封送处理

    因为数组是引用类型,所以数组的处理根据数组元素的类型是否为“可直接传递到非托管代码”的类型而分为两种情况.主要目标是看内存是怎么变化的,是复制还是锁定. 数组中的元素是"可直接传递到非托管代 ...

  5. spring jdbc获取插入记录的主键id

    在JDBC3.0规范中,当新增记录时,允许将数据库自动产生的主键值绑定到Statement或PreparedStatement中.使用Statement时,可以通过以下方法绑定主键值: int exe ...

  6. 计算sql语句的查询时间

    set statistics profile on set statistics io on set statistics time on go <这里写上你的语句...> go set ...

  7. jcFeather Maya 羽毛插件

    jcFeather 2.8.6 插件持续更新地址为:http://www.jerrykon.com/jcFeather.html 和 http://www.creativecrash.com/maya ...

  8. SqlDataReader和SqlDataAdapter

    SqlDataReader 高效,功能弱,只读访问SqlDataAdapter 强大,要求资源也大一点 SqlDataReader 只能在保持跟数据库连接的状态下才可以读取... SqlDataAda ...

  9. tp中ueditor编辑器的使用

    1/引入三个文件 <script type="text/javascript" charset="utf-8" src="{$Think.con ...

  10. php.h: No such file or directory

    建立一个php的include路径到/usr/include的软连接就好了 ln -s /usr/include/php-zts/* /usr/include/