Javascript 上传前是否可以检查图像的尺寸？

我有一个上传控制上传图像到服务器，但在上传之前，我只想确保图像的尺寸是正确的。

---

客户端有什么可以用JavaScript完成的吗？

试一试。我以前用过这个。

---

是的，HTML5API支持这一点

---

（在chrome上测试）

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

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

});

这只适用于现代浏览器，所以您仍然需要检查服务器端的维度。你也不能相信

---

因此，这也是您必须在服务器端检查它们的另一个原因。

要使事情变得简单，请使用javascript图像处理框架，如和

在的情况下，只需在客户端加载图像，并使用方法getWidth（）和getHeight（）检查图像的尺寸。有了这些维度，您可以允许提交文件或通知用户不兼容的维度

示例：

var image=new MarvinImage（）；
image.load（“https://i.imgur.com/oOZmCas.jpg“，图像加载）；
函数imageLoaded（）{
document.getElementById（“结果”）.innerHTML+=image.getWidth（）+，“+image.getHeight（）；
}

---

可能有点晚了，但这里有一个使用承诺的现代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)
})

---

如果您不需要处理svg文件，并且可以将自己限制为，那么您可以使用该函数做出基于承诺的一行代码：

if（createImageBitmap的类型！=“函数”）{
错误（“您的浏览器不支持此方法”）；
//回退到URL.createObjectURL+
}
inp.oninput=e=>{
createImageBitmap（inp.files[0]）
.then（（bmp）=>console.log（bmp.width，bmp.height））
.catch（控制台错误）；
}

用于多个文件的anser的扩展名：

const loadImage = file => new Promise((resolve, reject) => {
    try {
        const image = new Image();

        image.onload = function () {
            resolve(this)
        };

        image.onerror = function () {
            reject("Invalid image. Please select an image file.");
        }

        image.src = window.URL.createObjectURL(file);
    } catch (e) {
        reject(e)
    }
})

const loadImagesArray = async files => {
    let images = Array(files.length)
    await Promise.all(files.map((file, i) => (async () => {
        const loadedImage = await loadImage(file)
        images[i] = loadedImage
    })()))
    return images
}

然后，您可以按如下方式检查加载图像上的内容：

const loadedImages = await loadImagesArray(e.currentTarget.files)
for(const loadedImage of loadedImages) {
    console.log(loadedImage.width, loadedImage.height)
}

---

在HTML5文件API中，这是可能的，否则就不可能了！这应该回答你的问题：是的，这是可能的。当然（与所有验证一样），尽管在客户端进行检查可能是明智的，但任何客户端都可以伪造它，您也应该在服务器端进行验证。@AlienWebguy-当然是，在删除或选择图像名称时，请参见此，文件大小和维度会立即更新，而不会将图像上载到服务器。OP表示他们已经有了上载控件，但需要一个额外的功能。给他们一个全新的上传控件并不是一个很好的答案。他们想要的只是尺寸。不管怎样，那个上传程序现在已经移到这里了：不开玩笑，“createObjectURL”直到最近才在IE上工作。。。真可惜。

const loadedImages = await loadImagesArray(e.currentTarget.files)
for(const loadedImage of loadedImages) {
    console.log(loadedImage.width, loadedImage.height)
}