如何在上传前预览图像，获取文件大小、图像高度和宽度？

Question

如何在上传前预览图像，获取文件大小、图像高度和宽度？在上传到我的网站之前，如何使用jQuery或JavaScript获取文件大小、图像高度和宽度？

Answer 1

如果您可以使用jQuery验证插件，您可以这样做：

HTML：

<input type="file" name="photo" id="photoInput" />

JavaScript：

$.validator.addMethod('imagedim', function(value, element, param) {
  var _URL = window.URL;
        var  img;
        if ((element = this.files[0])) {
            img = new Image();
            img.onload = function () {
                console.log("Width:" + this.width + "   Height: " + this.height);
                //this will give you image width and height and you can easily validate here....

                return this.width >= param            };
            img.src = _URL.createObjectURL(element);
        }});

该函数作为ab onload函数传递。

代码取自这里

Answer 2

演示

不确定这是否是你想要的，只是简单的例子：

var input = document.getElementById('input');input.addEventListener("change", function() {
    var file  = this.files[0];
    var img = new Image();

    img.onload = function() {
        var sizes = {
            width:this.width,
            height: this.height        };
        URL.revokeObjectURL(this.src);

        console.log('onload: sizes', sizes);
        console.log('onload: this', this);
    }

    var objectURL = URL.createObjectURL(file);

    console.log('change: file', file);
    console.log('change: objectURL', objectURL);
    img.src = objectURL;});