上传之前可以检查图像尺寸吗？

Question

我有一个用于将图像上传到服务器的上传控件，但是在上传之前，我只想确保图像尺寸正确。客户端上有什么可以用javascript完成的吗？

Answer 1

您可以在提交表单之前检查它们：

window.URL = window.URL || window.webkitURL;

$("form").submit( function( e ) {

    var form = this;

    e.preventDefault(); //Stop the submit for now

                                //Replace with your selector to find the file input in your form

    var fileInput = $(this).find("input[type=file]")[0],

        file = fileInput.files && fileInput.files[0];

    if( file ) {

        var img = new Image();

        img.src = window.URL.createObjectURL( file );

        img.onload = function() {

            var width = img.naturalWidth,

                height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );

            if( width == 400 && height == 300 ) {

                form.submit();

            }

            else {

                //fail

            }

        };

    }

    else { //No file was input or browser doesn't support client side reading

        form.submit();

    }

});

这仅适用于现代浏览器，因此您仍然必须在服务器端检查尺寸。您也不能信任客户端，因此这是您仍然必须在服务器端检查它们的另一个原因。

Answer 2

是的，HTML5 API支持此功能。

http://www.w3.org/TR/FileAPI/

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

$("#file").change(function(e) {

    var image, file;

    if ((file = this.files[0])) {

        image = new Image();

        image.onload = function() {

            alert("The image width is " +this.width + " and image height is " + this.height);

        };

        image.src = _URL.createObjectURL(file);

    }

});

Answer 3

可能会晚一点，但这是使用promise接受的答案的现代ES6版本

const getUploadedFileDimensions: file => new Promise((resolve, reject) => {

    try {

        let img = new Image()

        img.onload = () => {

            const width  = img.naturalWidth,

                  height = img.naturalHeight

            window.URL.revokeObjectURL(img.src)

            return resolve({width, height})

        }

        img.src = window.URL.createObjectURL(file)

    } catch (exception) {

        return reject(exception)

    }

})

你会这样称呼它

getUploadedFileDimensions(file).then(({width, height}) => {

    console.log(width, height)

})