前端文件上传 获取文件大小 获取图片宽高

Posted aqigogogo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端文件上传 获取文件大小 获取图片宽高相关的知识,希望对你有一定的参考价值。

<input type="file" multiple accept="image/*" id="input" >
    inputElement.addEventListener("change", function () {
        const fileList = this.files; /* this -》 当前dom         */
        console.log(fileList)
        var reader = new FileReader();
        reader.onload = function (e) {
            console.log(e)
            /*获取图片base64*/
            let src=e.target.result;
            img.src=src;
            img.onload=function (e) {
                // console.log(e)

            };
            /*获取图片blob*/
            var objectURL = window.URL.createObjectURL(fileList[0]);
            console.log(‘objectURL‘,objectURL)

            // window.URL.revokeObjectURL(objectURL);//文档关闭会自动清除内存 也可手动关闭
        }
        reader.readAsDataURL(fileList[0]);
    }, false);

 

技术图片

 

 

以上是关于前端文件上传 获取文件大小 获取图片宽高的主要内容,如果未能解决你的问题,请参考以下文章

ueditor上传图片是哪个文件夹,如何限制 上传图片的大小(宽高)。

前端 JS 获取 Image 图像 宽高 尺寸

获取上传图片的像素大小

js判断上传图片宽高及文件大小

el-upload 上传文件到服务器,上传之前在before-upload中异步判断文件后缀,宽高分辨率,size大小

FileReader获取上传图片的宽高