input图片预览

我爱吃烧饼

已于 2022-02-11 10:01:19 修改

阅读量435

点赞数

分类专栏： web前端文章标签：图片预览

于 2018-09-26 22:33:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_18484091/article/details/82860525

版权

web前端专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            #preview {
                display: inline-block;
                width: 20.56rem;
                height: 20.56rem;
                position: relative;
                background-image: url("新建文件夹/1 (5).jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            
            #file {
                width: 100%;
                height: 100%;
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                cursor: pointer;
                z-index: 5;
            }
        </style>
    </head>
    <body>
        <div id="preview">
            <input type="file" accept="image/*" id="file" value="" />
        </div>
        <script type="text/javascript">
            var preview = document.querySelector('#preview');
            var eleFile = document.querySelector('#file');
            eleFile.addEventListener('change', function() {
                var file = this.files[0];                
                // 确认选择的文件是图片                
                if(file.type.indexOf("image") == 0) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);                    
                    reader.onload = function(e) {
                        // 图片base64化
                        var newUrl = this.result;
                        preview.style.backgroundImage = 'url(' + newUrl + ')';
                    };
                }
            });
        </script>
    </body>

</html>