在输入栏上限制图像的宽度和高度

时间:2018-07-26 01:38:38

标签: javascript jquery html css

是否可以通过使用html,css和javascript / jquery来限制输入字段中图片的宽度和高度?我正在尝试限制个人资料照片的上传(需要使照片成为完美的正方形,例如200x200、300x300)

2 个答案:

答案 0 :(得分:0)

PHP具有一个名为getimagesize()的函数。

list($width, $height, $type, $attr) = getimagesize("img.jpg");
在文档中可以看到

http://php.net/manual/en/function.getimagesize.php

因此,只需在提交数据库之前检查高度和宽度

答案 1 :(得分:0)

您可以通过从上传的文件创建图像来检查图像宽度的高度。

$("#fileUploadForm").submit(function(e){
var window.URL = window.URL || window.webkitURL;
var fileInput = $(this).find("input[type=file]")[0],
    file = fileInput.files ? fileInput.files[0] : null;

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 == height) {//perfect square
            this.submit();
        }
        else {
            //fail
        }
    };
}
});