上傳圖片的樣式

實現上傳圖片的時候，把上傳的按鈕屏蔽掉，並實現圖片預覽。

如圖上傳圖片前：

上傳圖片後：

實現的代碼如下：

html：

<div class="pic_Div">
        <div style="width: 97%;margin: auto;line-height: 50px;overflow: hidden">
            <div style="float: left;width:20%">商品圖片</div>
            <div style="float: left;width:77%;">
                <input type="file" name="picUrl" class="fileCss" id="picUrl">
                <img src="" style="width: 40px;height: 40px;float: right;margin: 5px 0px 5px 0px"  id="img1">
            </div>
        </div>

css：

 .pic_Div{border: 1px solid #DDD;width:100%;overflow: hidden;background-color: #ffffff;height: 50px}
        .fileCss{ filter:alpha(opacity:0);opacity: 0;width:70%;border: 0px solid #000000; float: left }

js：

<script>
    $("#picUrl").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        if (objUrl) {
            $("#img1").attr("src", objUrl) ;
            document.getElementById("img1").style.display = "";
        }
    }) ;
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>