简单的input file预览图片

1 html

上传预览
<div class="imgInputBox">
    <input id='headFile' type="file" class='imgInputBox_imgInput' name='headFile' onchange='getObjectURL(this,"headIcon")'>
    <img src="" class='imgInputBox_img' id='headIcon'  alt="">
</div>

2  css

/*图片上传按钮*/
        .imgInputBox{
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 150px;
            background-color: #f7f7f7;
        }
        .imgInputBox .imgInputBox_imgInput{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 3;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
        }
        .imgInputBox .imgInputBox_img{
            display: block;
            width: 100%;
            height: 100%;
        }

3 js

function getObjectURL(objFile,imgId) {
        console.log(objFile);
        console.log(imgId);
        var url = null;
        var file=objFile.files[0];
        //兼容处理
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit
            url = window.webkitURL.createObjectURL(file);
        }
        if(imgId){
            document.getElementById(imgId).src=url;
        }
//        return url;
    }