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>

相关阅读:
记：lorawan协议
只会加班的项目经理，迟早被淘汰
kettle遇到的问题-脚本启动系统找不到指定路径
鸿蒙开发接口媒体：【@ohos.multimedia.audio (音频管理)】
paddlepaddle 38 使用aistudio部署自己训练的动态图模型
vue中子组件如何向父组件传值与父组件如何向子组件传值
c++ 11 多线程支持（std::future）
Linux——进程间通信大汇总！（概述、管道通信、消息队列、共享内存、信号、信号量）
windows下安装hbase
程序员自由创业周记#2：前期准备

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