JavaScript 获取上传图片大小、尺寸

4,515次阅读

共计 1167 个字符，预计需要花费 3 分钟才能阅读完成。

背景

在一些比较特殊的需求中，会对上传的文件大小、尺寸做限制，例如某个地方的图片只能是 1920 * 1080 的大小，然后文件体积小于 500KB 等。

上传的时候做限制

一个最简单的上传案例

<input type="file" id="j-input-file" />

document.getElementById('j-input-file').addEventListener('change', function(e) {console.log(this.files[0]);
    // {name: '', size:'', ...}
});

这个样子能拿到需要上传图片的基本信息（其他信息点击查看 <input type="file">），size 的单位是 B，需要做单位换算。

如果在支持 HTML5 的浏览器上面，可以通过 FileReader 对象生成预览图，然后获取图片的原始大小。

<input type="file" id="j-input-file" />
<div id="j-img"></div>

document.getElementById('j-input-file').addEventListener('change', function(e) {const file = this.files[0];
    let reader = new FileReader();
    // 将文件以 Data URL 形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
        // 显示文件
        let ElImg = document.getElementById('j-img');
        ElImg.innerHTML = '<img src="' + this.result +'"alt="" />';

        let El = ElImg.getElementsByTagName('img')[0];
        El.onload = function() {console.log(El.width);
            console.log(El.height);
        }
    }
});

如果不支持 HTML5 的浏览器，只有当上传完成后再通过 img 元素加载图片，判断尺寸大小了。

已存在的图片限制

当编辑某个已存在的数据，图片已经上传完整了，但也要对其做限制，这个时候高度、宽度都比较好解决，通过上面类似的方式，用 JavaScript 重新加载一次图片，并且不对它做高宽的限制。

图片大小可以通过 ajax 的方式获取。

// jQuery 的写法
$.ajax({
    url: '图片地址',
    complete: function (xhr, statusText) {if (xhr.status === 200) {
            // KB
            var __size = (xhr.responseText.length / 1024).toFixed(2);
        }
    }
});

无论是同源还是非同源，都可以知道其大小。

正文完