zoukankan      html  css  js  c++  java
  • input[type="file"]上传图片并显示图片

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .hide{
                    display: none !important;
                }
                .fileBox{
                    padding: 40px 0 20px 0;
                }
                .fileInfo{
                    font-size: 14px;
                    margin-bottom: 20px;
                }
                .close{
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    background: url('img/close.svg') no-repeat center center;
                    z-index: 99;
                }
                .baseImg{
                    width: 200px;
                    height: 200px;
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
                .inputBox{
                    width: 200px;
                    height: 200px;
                    position: relative;
                    margin-bottom: 30px;
                    cursor: pointer;
                }
                .fileInput{
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    cursor: pointer;
                }
                .add{
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    width: 100%;
                    height: 200px;
                    line-height: 200px;
                    text-align: center;
                    border: 2px solid #9CC7F2;
                    font-size: 40px;
                    color: #B4B4B4;
                }
            </style>
        </head>
        <body>
            <div class="fileBox">
                <div class="fileInfo">第一张图</div>
                <div class="inputBox">
                    <i class="close hide" id="close1"></i>
                    <input type="file" name="pic" class="fileInput" id="pic1" accept="image/gif,image/jpg,image/png" onChange="inputChange('pic1','inputImg1','add1','close1')" />
                    <img src="" alt="" id="inputImg1" class="baseImg hide"/>
                    <div class="add" id="add1">+</div>
                </div>
            </div>
            
            <script src="js/jquery.min.js"></script>
            <script>
                function inputChange(picId,imgId,addId,closeId){
                    var files = document.getElementById(picId).files; 
                    console.log(files);
                    
                    if(files.length == 0) return; 
                    var form = new FormData(), 
                        file = files[0];
                    form.append('file', file);
                    
                    var reader = new FileReader();
                    reader.readAsDataURL(file); //base64
                    //接收到图片时触发onload
                    reader.onload = function(e){
                        var result = reader.result;
                        console.log(result);
                        document.getElementById(imgId).src = result;
                        document.getElementById(imgId).classList.remove('hide');
                        document.getElementById(addId).classList.add('hide');
                        document.getElementById(closeId).classList.remove('hide');
                    };
                    
    //                $.ajax({
    //                    url: '/upload',
    //                    type: 'POST',
    //                    cache: false,
    //                    data: formData,
    //                    processData: false,
    //                    contentType: false
    //                }).done(function(res) {
    //                    
    //                }).fail(function(res) {});
                }
    //            document.getElementById('pic1').addEventListener('click', function() { this.value = ''; }, false);
                
                $(function(){
                    $('.close').click(function(){
                        $(this).addClass('hide');
                        $(this).siblings('.add').removeClass('hide');
                        $(this).siblings('img').addClass('hide');
                    })
                })
            </script>
        </body>
    </html>

    效果展示:

    上传图片后:

    参考文章: https://my.oschina.net/u/2306318/blog/845836

  • 相关阅读:
    CodeForces 19D Points (线段树+set)
    FZU 2105 Digits Count
    HDU 5618 Jam's problem again(三维偏序,CDQ分治,树状数组,线段树)
    HDU 5634 Rikka with Phi (线段树)
    Java实现 蓝桥杯 算法提高 转圈游戏(暴力快速幂)
    Java实现 蓝桥杯 算法提高 转圈游戏(暴力快速幂)
    Java实现 蓝桥杯 算法提高 转圈游戏(暴力快速幂)
    Java实现 蓝桥杯 算法提高VIP Substrings(暴力)
    Java实现 蓝桥杯 算法提高VIP Substrings(暴力)
    Java实现 蓝桥杯 算法提高VIP Substrings(暴力)
  • 原文地址:https://www.cnblogs.com/rachelch/p/9850936.html
Copyright © 2011-2022 走看看