单图片上传

单图片上传

 

效果：

 

 

 

 

css样式：

 <style>
        .upload-invoice {
            width: 375px;
            height: 177px;
            margin: 25px 0 50px;
            background-image: url(../images/invoice.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .upload-invoice p {
            height: 100%;
            line-height: 177px;
            text-align: center;
            font-size: 30px;
            background-color: #fff;
            opacity: 0.7;
            position: relative;
        }
        
        .upload-invoice p span {
            font-size: 30px;
        }
        
        .upload-invoice img {
            max-width: 100%;
            max-height: 100%;
        }
        
        #file {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        
        #img3 {
            max-width: 375px;
            max-height: 177px;
            display: none;
            margin: 25px 0 30px;
        }
    </style>

　HTML：

 <div class="invoice-wrapper">
        <div class="upload-invoice ">
            <p>
                <input type="file" id="file" />
                <span>+</span>选择发票
            </p>
        </div>
        <img src="#" id="img3" />
    </div>

　js:

 $(function() {
            $("#file").change(function(e) {
                e.preventDefault();
                changepic();
            });
        })
        // 上传图片预览
    function changepic() {
        $(" .upload-invoice ").css("display", "none");
        var reads = new FileReader();
        f = document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            $("#img3").attr("src", this.result);
            $(" #img3 ").css("display", "block");
        };
    }