最新消息:站点添加了一些不太友好的内容,请见谅...

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

若思若想 onlyling 363浏览 0评论

背景

在一些比较特殊的需求中,会对上传的文件大小、尺寸做限制,例如某个地方的图片只能是 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);
        }
    }
});

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

转载请注明:OnlyLing-WEB前端开发者 » JavaScript 获取上传图片大小、尺寸

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址