js 实现前端图片上传，展示缩略图功能

最新推荐文章于 2025-06-19 19:56:36 发布

原创最新推荐文章于 2025-06-19 19:56:36 发布 · 2.3w 阅读

8 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。 Email: adleytales@126.com

文章标签：

#前端 #解决方案 #图片

HTML5 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种通过监听 inputfile 表单的 onchange 事件来实现实时预览上传图片的方法，并解决了高级浏览器中图片路径加密导致无法显示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：很简单，就是监听input file表单的onchange事件。

注意：方法在ie浏览器可以实现，但是在高级浏览器非IE，就会有fakepath，图片路径加密的问题，导致显示不出上传的图片。

解决方案：

引入 FileReader

FileReader API 地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReade

    <!DOCTYPE html>
<html>
<head>
    <title>文件上传图片，显示缩略图</title>
    <style type="text/css">
        div {
            margin: 30px;
        }
        #mImg {
            max-width: 100px;
        }
    </style>
</head>
<body>

    <div>
        <input id="mFile" type="file" name="file">
    </div>
    <div>
        <img id="mImg" src="">
    </div>


    <script type="text/javascript">

        document.getElementById('mFile').onchange = function (ev) {
            //判断 FileReader 是否被浏览器所支持
            if (!window.FileReader) return;

            console.log(ev);

            var file = ev.target.files[0];  

            if(!file.type.match('image/*')){
                alert('上传的图片必修是png,gif,jpg格式的！');
                ev.target.value = ""; //显示文件的值赋值为空
                return;
            }

            var reader = new FileReader();  // 创建FileReader对象

            reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果

            reader.onload = function(e){
                document.getElementById('mImg').src = e.target.result;
            }

        }

    </script>
</body>
</html>