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

Related to this topic

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

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

图像客户端的尺寸验证

2 个答案: