前端实现input[type='file']上传图片预览效果

Posted web_study

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端实现input[type='file']上传图片预览效果相关的知识，希望对你有一定的参考价值。

众所周知javascript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）；

但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端；

二是，我今天写的内容，使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容；此种方法可以优化图片加载速度，减少方法一占用带宽的问题；

但是，此种方法兼容性存在问题，主要是IE浏览器（ie10以上没问题），本文不在讨论兼容性问题，代码如下：

<!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: 2.56rem;
                height: 2.56rem;
                position: relative;
                background-image: url(img/iconfont-tianjia.png);
                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>

直接复用测试即可，FileReader对象是通过将图片url转换成base64格式，然后显示出来。

以上是关于前端实现input[type='file']上传图片预览效果的主要内容，如果未能解决你的问题，请参考以下文章

input type='file'限制上传文件类型

前端上传文件的几种方法

input[type='file']获取上传文件路径案例

把HTML5的手机网站嵌入安卓APP中，发现<input type='file' />的上传按钮功能失效，点击没有任何反应？

css-input[type='file']光标效果

vue使用input标签 type='file'上传文件