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

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();
    }

});

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