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

 

posted @ 2018-10-25 16:48  rachelch  阅读(1543)  评论(0)  编辑  收藏  举报