图像客户端的尺寸验证

Question

我正在工作的网站有一个上传图像的选项，但我必须在上传到服务器端或提交之前验证图像的尺寸(宽度，高度)。

例如，图像必须是250x250，否则会出现警告，用户无法上传图像，这是我的代码的一部分:

<form action="upload_file.php" method="post"  enctype="multipart/form-data" name = "upload" id="insertBook" onSubmit="return validateImage();"> 
    <input type="file" name="image" value="upload" id = "myImg">
    <input type="submit" name = "submit">           
</form>

validateImage函数现在只检查扩展，我希望它也检查尺寸。

下面是到目前为止的代码:

function validateImage(){
    var allowedExtension = ["jpg","jpeg","gif","png","bmp"];
    var fileExtension = document.getElementById('myImg').value.split('.').pop().toLowerCase();
    var isValidFile = false;
    for(var index in allowedExtension) {
        if(fileExtension === allowedExtension[index]) {
            isValidFile = true; 
            break;
        }
    }
    if(!isValidFile) {
        alert('Allowed Extensions are : *.' + allowedExtension.join(', *.'));
    }
    return isValidFile;
}

谢谢!:)

Answer 1

function validateImage(){
    var isValidFile = false;
    var image = document.getElementById('myImg');
    var allowedExtension = ["jpg","jpeg","gif","png","bmp"];
    var srcChunks = image.src.split( '.' );
    var fileExtension = srcChunks[ srcChunks.length - 1 ].toLowerCase();
    if ( image.width !== image.height !== 250 ) {
        console.log( 'Size check failed' );
        return false;
    } 
    for(var index in allowedExtension) {
        if(fileExtension === allowedExtension[index]) {
            isValidFile = true; 
            break;
        }
    }
    if(!isValidFile) {
        alert('Allowed Extensions are : *.' + allowedExtension.join(', *.'));
    }
    return isValidFile;
}

Answer 2

与本主题相关

正如我在我的评论中所说，你可以检查客户端的大小，但这是不安全的，因为javascript可能被绕过，你的验证将没有任何目的。如果有人真的想上传一个5Go的文件，他只需要重新定义你的检查功能。

客户端无法访问服务器端验证。此外，取决于您的后端和您的图像处理(您是否像处理简单文件一样处理它?或者您有一些库来处理图像?)，您可能会找到一些方法来帮助您处理图像尺寸。例如，在python中，我使用PIL (Pillow For 3)。X版本)检查图像信息，大小，尺寸，内容，检查它是否是一个真正的文件或不是…实际上，上传一个包含php代码的损坏文件(例如)非常容易，所以当你让用户上传内容到你的服务器时，你应该非常小心。