首页 > Web开发 > 详细

前端模拟 图片上传---->>通过选取的图片获取其路径<<------

时间:2016-12-24 16:18:57      阅读:189      评论:0      收藏:0      [点我收藏+]
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            
            position: relative;
            overflow: hidden;
            background: #EEE;
            width: 100%;
            height: 667px;
        }

        #bg, #mask-bg {
            position: absolute;
            width: 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>

 

前端模拟 图片上传---->>通过选取的图片获取其路径<<------

原文:http://www.cnblogs.com/vali/p/6217236.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!