zoukankan      html  css  js  c++  java
  • 前端实现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格式,然后显示出来。

  • 相关阅读:
    ASCII、Unicode和UTF-8等常见字符编码格式介绍
    pycharm创建脚本头文件模板
    pycharm常用设置项和快捷键
    Genymotion安装apk问题
    [Android测试] Appium的一些坑问题错误解决 与 技巧集锦
    Appium+python自动化测试过程中问题
    python客户端和Appium服务端联调出现的问题解决办法
    移动端自动化测试环境搭建
    "http://127.0.0.1:4723/wd/hub"的解释
    wireshark抓包看ECN
  • 原文地址:https://www.cnblogs.com/web-wjg/p/7799173.html
Copyright © 2011-2022 走看看