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>

相关阅读:
linux权限维持（三）
加密狗作用是什么？工作原理及使用方法
彩色图像处理彩色模型
RISC Zero项目简介
SAP UI5 架设在 http-proxy 库上的单步调试
DA14531在三星手机手写笔的应用让我打开眼镜
10.Nginx负载均衡
论文笔记: 极限多标签学习之 FastXML
微信小程序学习笔记3.0
Java实现拼图小游戏（1）—— JFrame的认识及界面搭建

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