input上传图片，并预览


<body>
    <input type="file" id="ipt">
    <img src="" alt="" id="imgPre">
    <script>
        const iptElm = document.getElementById('ipt')
        const imgElm = document.getElementById('imgPre')
        iptElm.onchange = function (e) {
            console.log(iptElm.files[0]);
            let imageType = /^image\//;
            //是否是图片
            if (!imageType.test(iptElm.files[0].type)) {
                alert("请选择图片！");
                return;
            }
            // 方法一：URL.createObjectURL
            // url = URL.createObjectURL(iptElm.files[0]);
            // imgElm.src = url
            // 方法二：FileReader
            const reader = new FileReader()
            reader.onload=function(e){
                imgElm.src = e.target.result;
            }
            reader.readAsDataURL(iptElm.files[0])
        }
    </script>
</body>

相关阅读:
51单片机—智能垃圾桶（定时器）
Redis Geo
大学生网课答案查询公众号搭建教程
Linux安全—linux三剑客之sed（持续更新）
Android 实现椭圆形中心发散渐变绘制
卷积神经网络相比循环神经网络具有哪些特征
操作符详解（上） (C语言)
【MQTT从入门到提高系列 | 10】MQTT协议设计实战
GPU不够用：语言模型的分布式挑战
2023年中国车载导航仪产量、销量及市场规模分析[图]

原文地址：https://blog.csdn.net/weixin_51293134/article/details/132892816