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

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

可能会晚一点，但这是使用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)})