<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. root与普通用户的切换

    普通用户切换到root用户:sudo su - root用户切换到普通用户:su henie

  2. ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色

    我们常见某些APP上滑的时候,NavBar颜色会从透明渐变为某种颜色 原理非常简单,根据scrollView的回调动态修改NavBar的透明度即可. 在RN中,尤其是ListView中这个回调不是很好 ...

  3. weiphp踩坑记录

    记录使用weiphp过程中遇到的问题及解决办法: 1.按照网上的教程创建插件怎么没有效果?replyText没有回复信息? 后台清除缓存即可!

  4. 定位框一闪而过 iOS Swift

    需求:获取经纬度. 方案:我自定义了一个类模块CLLocationModule.swift 备注以下代码里 let IS_IOS8 = (UIDevice.currentDevice().system ...

  5. Nginx配置SSL证书部署HTTPS网站

    1.购买ssl证书 购买网站:沃通 2.上传证书到nginx服务器,然后进行解压. 解压后的的效果: [root@bubidev-ng3 nginx]# pwd/etc/nginx [root@bub ...

  6. centos6.5 更新yum源

    在使用centos过程中,自带的yum源包,不能满足的情况下,这个时候就可以考虑升级yum源了.国内用的比较多的是163镜像地址为http://mirrors.163.com/.help/centos ...

  7. mybits批量插入

    <!--批量插入--> <insert id="batchSave" parameterType="java.util.List"> i ...

  8. skipping the actual organic impact moderation supplied

    The most recent running footwear design has gone out. The high cost is actually $150. Expert sports ...

  9. java 反射

    com.my.Ob; @Table(name="ob") class Ob{ @Id private Integer id; @Column(name="name1&qu ...

  10. CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14

    准备篇: CentOS 7.0系统安装配置图解教程 http://www.osyunwei.com/archives/7829.html 一.配置防火墙,开启80端口.3306端口 CentOS 7. ...