input上传文件自定义样式以及上传前预览宽高判断实现方法

图片上传code

const uploadBtn = document.querySelector('#upload_btn');//自定义的点击按钮比如
、
const file = document.querySelector('#upload_file');//type属性为file的input,在自定义的话需要隐藏
    //给自定义点击按钮绑定事件
    uploadBtn.addEventListener('click', function(e) {
    	//定义事件
        var evt = new MouseEvent('click', {
            bubbles: false,
            cancelable: true,
            view: window
        });
        //事件派发给隐藏的input
        file.dispatchEvent(evt);
    }, false);
    //选择文件时触发
    file.addEventListener('change', function(e) {
        let name = e.target.files[0].name;//选中的文件名称
        console.log(URL.createObjectURL(event.target.files[0]));//文件的临时链接
        let img = new Image();//创建一个img对象，也可以在页面写img标签（可用来预览）
        img.src = URL.createObjectURL(event.target.files[0]);//文件的临时链接，也可以读取img中的src
        img.onload = function () {//图片加载完成，
            console.log('图片高:'+this.height+'图片宽:'+this.width)//获取图片的尺寸
        }
    }, false);