js原生实现图片上传尺寸及大小控制

一直以来，对input的强大功能并没有做很深入的了解，平时也都是直接用第三方库实现对应的功能，现在需求中需要实现图片上传并控制大小与尺寸的要求。效果如下：

其实是很简单的代码就可以实现，我以前没有深思过.......

<div>
        <button id="but">点我</button>
        <input id="ceshi" type="file" accept="image/png, image/jpeg" style="display:none">
        <p></p>
    </div>

/* 模拟上传 */
    const btn = document.querySelector("#but")
    const ipt = document.querySelector("#ceshi")
    const sp = document.querySelector("p")
    
    btn.onclick = function () {
        ipt.click()
    }
    ipt.onchange = function (e) {
        const file = e.target.files[0]
        // 控制大小,这里根据需要自行设置
        if (file.size>1024*10) {
             alert("限制10Kb内图片上传")
             return
         }
        const url = window.URL.createObjectURL(file);
        const imgElement = new Image();
        imgElement.onload = function () {
            const {width,height} = this;
            if ( width < 100 || height < 100 || width % height !== 0 ) {
                alert("尺寸不符合,限制尺寸100*100");
                return;
            }
            sp.innerHTML = file.name;
        }
           imgElement.src = url; // 注意这里给src地址赋值是需要写在imgElement.onload()方法后面的，由于onload()是回调一个函数，浏览器需要获取万这个图片信息后才可以拿到对应的宽高
    }