单图片上传

2018-11-12 06:50:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

单图片上传

 

效果:

 

 

 

 

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");
        };
    }

  

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【代码笔记】Web-Javascript-javascript简介

下一篇:React之设置元素的滚动条