javascript-上传前可以检查图像尺寸吗?

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

Sabby62 asked 2019-11-07T17:03:47Z
6个解决方案
64 votes

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

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

});

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

Esailija answered 2019-11-07T17:04:11Z
46 votes

是的,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);


    }

});​

演示(在chrome上测试)

Gurpreet Singh answered 2019-11-07T17:04:49Z
1 votes

为了使事情变得简单,请使用JavaScript图像处理框架,例如fabric.js,processing.js和MarvinJ。

对于MarvinJ,只需将图像加载到客户端,然后使用getWidth()和getHeight()方法来检查图像的尺寸。 具有尺寸后,您可以允许文件提交或将不兼容的尺寸通知用户。

例:

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>

Gabriel Ambrósio Archanjo answered 2019-11-07T17:05:35Z
1 votes

可能会晚一点,但这是使用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)
})
techouse answered 2019-11-07T17:06:06Z
1 votes

如果您不需要处理svg文件并且可以将自己限制在最新的浏览器中,则可以使用<input type="file" id="inp" accept="image/*">函数制作基于Promise的一个衬纸:

<input type="file" id="inp" accept="image/*">
<input type="file" id="inp" accept="image/*">

Kaiido answered 2019-11-07T17:06:39Z
-3 votes

试一下。 我过去曾经使用过。[https://github.com/valums/file-uploader]

webNoob answered 2019-11-07T17:07:03Z
translate from https://stackoverflow.com:/questions/13572129/is-it-possible-to-check-dimensions-of-image-before-uploading