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

1229905390qq_cl

已于 2022-05-30 13:59:41 修改

阅读量285

点赞数

文章标签： javascript 前端

于 2022-05-30 13:51:04 首次发布

本文链接：https://blog.csdn.net/qq_42968348/article/details/125044969

版权

图片上传code

const uploadBtn = document.querySelector('#upload_btn');//自定义的点击按钮比如<div>、<span>
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);