JS回显上传的图片

时光不弃青栀

已于 2024-01-24 10:29:35 修改

阅读量491

点赞数 9

文章标签： javascript 开发语言 html5

于 2024-01-19 17:45:17 首次发布

本文链接：https://blog.csdn.net/qingzhid/article/details/135703775

版权

在项目开发时有些业务场景需要用户上传图片并回显上传的图片，项目没有使用layui等前端框架，只能自己开发了。在此备注下方便后续取用。
总结下逻辑：
通过input文件域上传图片，通过js获取图片的base64，放入要显示图片的src属性中即可。

代码如下（直接复制可用）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传图片并显示至页面Demo</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        $(function(){
            // 这个只是用于触发input文件域的点击事件
            // 文件域放出来太丑了┭┮﹏┭┮
            $("#uploadBtn").click(function() {
                $("#photoFile").click();
            })

            // 正文开始，绑定文件域名的change事件
            $("#photoFile").change(function () {
                //获取input file的files文件数组;
                //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = $('#photoFile').get(0).files[0];
                var typeName = file.type.substring(file.type.indexOf("/") + 1);
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload = function (e) {
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    $('#photoImg').get(0).src = e.target.result;
                }
                
            })

            // 上传至服务器的操作省略......
        })

        
    </script>
</head>
<body>
    <div style="text-align: center;">
        <img id="photoImg" style="width: 200px;height: 200px;">
        <input type="file" id="photoFile" style="display: none;">
        <div>
            <button style="padding: 10px;margin-top: 10px;" id="uploadBtn">上传图片</button>
        </div>
     </div>
</body>
</html>

效果如图：
在这里插入图片描述

时光不弃青栀

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS回显上传的图片

在此备注下方便后续取用。通过input文件域上传图片，通过js获取图片的base64，放入要显示图片的src属性中即可。//选择所要显示图片的img，要赋值给img的src就是e中target下result里面。//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;//获取input file的files文件数组;//读取成功后返回的一个参数e，整个的一个进度事件。// 正文开始，绑定文件域名的change事件。//的base64编码格式的地址。//创建用来读取此文件的对象。
复制链接

扫一扫