js上传图片并获取上传图片的大小

js上传图片并获取上传图片的大小

网上关于上传图片的代码有很多，但是获取上传图片大小这里，我曾经找了很久，发现很多文章的方法都不能实现，现在将解决问题后的代码拿出来，供大家参考，少走弯路。

html代码

添加上传图片的标签很简单，只需要将input的type类型设置为type="file":

<input id="fileop" type="file" name="advertPicture" accept="image/gif,image/jpeg,image/jpg,image/png"> 

写好input标签后，我们需要做两件事：监听上传事件，并获取到上传图片的尺寸。
监听上传事件我们通过监听change事件实现，并定义读取文件对象FileReader，在图片上传完毕后将图片转化成base64格式，以便Image对象根据该格式获取到图片，务必要在Image对象加载完毕后再检查尺寸，否则获取到的尺寸会是0*0；检查尺寸不能使用width和height属性，这两个属性在未手动指定之前，永远都是0，所以，获取图片尺寸需要使用naturalWidth和naturalHeight属性，这两个属性会返回图片的真实大小。

document.getElementById("fileop").addEventListener("change",function() {
    var files = this.files;
    if(files.length!=0){//保证用户选择了图片，而不是点击了取消上传按钮
        var fileName=files[0].name;//获取上传图片名称，如不需要，可不写
        var fileReader = new FileReader();
        fileReader.readAsDataURL(files[0]);//根据图片路径读取图片
        fileReader.onload = function(e) {
            var base64 = this.result;
            var img = new Image();
            img.src = base64;
            img.onload = function() {
                alert(img.naturalWidth+ " " + img.naturalHeight);
            }
        }
    }       
}

代码并不多，希望能帮助到大家