zoukankan      html  css  js  c++  java
  • 前端模拟 图片上传---->>通过选取的图片获取其路径<<------

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                
                position: relative;
                overflow: hidden;
                background: #EEE;
                 100%;
                height: 667px;
            }
    
            #bg, #mask-bg {
                position: absolute;
                 100%;
                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[0]);
            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>
  • 相关阅读:
    正则表达式--断言
    ie6兼容性处理
    git log 高级用法
    html-文件上传设置accept类型延时问题
    sublime text3 -- JavaScript Completions
    Git进行fork后如何与原仓库同步
    Redis的数据结构及应用场景
    PHP手册-函数参考-日期与时间相关扩展
    什么是缓存
    MySQL的连接方式、事务、性能优化
  • 原文地址:https://www.cnblogs.com/vali/p/6217236.html
Copyright © 2011-2022 走看看