Javascript 上传前检查图像大小

我注意到，当上传一张个人资料图片到Twitter时，上传前会检查图片的大小。有人能告诉我这样的解决方案吗

---

谢谢

如果您正在检查文件大小，您可以使用类似的方法在上传前检查文件大小

---

可能需要在服务器上检查实际的文件尺寸（高度/宽度）。

我认为这是不可能的，除非您使用闪存。您可以使用或来实现这些功能。

我已经在chrome中测试了这段代码，它运行良好

var x = document.getElementById('APP_LOGO'); // get the file input element in your form
var f = x.files.item(0); // get only the first file from the list of files
var filesize = f.size;
alert("the size of the image is : "+filesize+" bytes");

var i = new Image();
var reader = new FileReader();
reader.readAsDataURL(f);
i.src=reader.result;
var imageWidth = i.width;
var imageHeight = i.height;
alert("the width of the image is : "+imageWidth);
alert("the height of the image is : "+imageHeight);

---

类似的内容应该能够处理异步加载的表单、设置了或没有设置“multiple”的输入，并避免在使用FileReader.readAsDataURL和Image.src时出现争用条件

$('#formContainer').on('change', '#inputFileUpload', function(event) {
  var file, _fn, _i, _len, _ref;
  _ref = event.target.files;
  _fn = function(file) {
    var reader = new FileReader();
    reader.onload = (function(f) {
      return function() {
        var i = new Image();
        i.onload = (function(e) {
          var height, width;
          width = e.target.width;
          height = e.target.height;
          return doSomethingWith(width, height);
        });
        return i.src = reader.result;
      };
    })(file);
    return reader.readAsDataURL(file);
  };
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    file = _ref[_i];
    _fn(file);
  }
});

$（'formContainer'）。在（'change'，'inputFileUpload'，函数（事件）上{
变量文件，fn，i，len，ref；
_ref=event.target.files；
_fn=函数（文件）{
var reader=new FileReader（）；
reader.onload=（函数（f）{
返回函数（）{
var i=新图像（）；
i、 onload=（函数（e）{
高度、宽度；
宽度=e.目标宽度；
高度=e.目标高度；
返回剂量（宽度、高度）；
});
返回i.src=reader.result；
};
})（文件）；
返回reader.readAsDataURL（文件）；
};
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
文件=_ref[_i]；
_fn（文件）；
}
});

注意：需要jQuery、HTML5和如下结构的挂钩：

<div id="formContainer">
  <form ...>
  ...
    <input type="file" id="inputFileUpload"></input>
  ...
  </form>
</div>

...
...

图像加载时，需要检查图像宽度和高度

var img = new Image;
img.src = URL.createObjectURL(file);
img.onload = function() {
    var picWidth = this.width;
    var picHeight = this.height;

    if (Number(picWidth) > maxwidth || Number(picHeight) > maxheight) {
        alert("Maximum dimension of the image to be 1024px by 768px");
        return false;
    }
}

---

这对我很合适

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
var file, img;


if ((file = this.files[0])) {
    img = new Image();
    img.onload = function() {
        if((this.width < 800)||(this.height < 400)){
            alert('Image too small. Images must be bigger than 800 x 400');
            $('#file').val('');
        }

    };
    img.onerror = function() {
        alert( "not a valid file: " + file.type);
    };
    img.src = _URL.createObjectURL(file);

}

});

var URL=window.URL | | window.webkitURL；
$（“#文件”）.change（函数（e）{
var文件，img；
如果（（file=this.files[0]））{
img=新图像（）；
img.onload=函数（）{
如果（（此宽度<800）| |（此高度<400））{
警报（“图像太小。图像必须大于800 x 400”）；
$（'#file'）.val（''）；
}
};
img.onerror=函数（）{
警报（“不是有效文件：“+file.type”）；
};
img.src=\u URL.createObjectURL（文件）；
}
});

对创作者的赞誉：

我修改了它来指定上传的最小宽度和高度