Javascript 图像客户端的尺寸验证

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

例如，图像必须为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>

谢谢！：）

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

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

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

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

---

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

我个人不会对此类内容使用客户端验证。服务器端将确保用户在发送图像之前不会更改或绕过该函数。另外，根据您的后端，图像处理可能具有一些检查大小的功能。处理内存中的文件（在ram中）将是实现这一点的最有效方法。如果映像通过验证，只需将其写入磁盘，如果未通过验证，则将其删除。当然，您可以在上传之前检查大小。可能不安全。在服务器端进行检查。@Depado客户端验证是为了方便用户，我更喜欢客户端验证和错误报告。我相信在服务器端，如果请求无效，您应该验证并删除请求，并将显示错误消息的所有令人讨厌的UI内容留给客户端。@ImanMohamadi您在这一点上是对的。尽管客户端验证只针对UI内容。你永远不应该依靠客户端来完成这类事情，这就是为什么我说它不安全的原因。始终先执行服务器端验证，然后执行客户端验证。否则，您可能会认为客户端的流程是安全的。客户端验证始终是可选的。当然，这可能会节省一些对服务器的错误请求，但是如果有人真的想上传图像，他可以绕过它。我个人不会对这种东西使用客户端验证。服务器端将确保用户在发送图像之前不会更改或绕过该函数。另外，根据您的后端，图像处理可能具有一些检查大小的功能。处理内存中的文件（在ram中）将是实现这一点的最有效方法。如果映像通过验证，只需将其写入磁盘，如果未通过验证，则将其删除。当然，您可以在上传之前检查大小。可能不安全。在服务器端进行检查。@Depado客户端验证是为了方便用户，我更喜欢客户端验证和错误报告。我相信在服务器端，如果请求无效，您应该验证并删除请求，并将显示错误消息的所有令人讨厌的UI内容留给客户端。@ImanMohamadi您在这一点上是对的。尽管客户端验证只针对UI内容。你永远不应该依靠客户端来完成这类事情，这就是为什么我说它不安全的原因。始终先执行服务器端验证，然后执行客户端验证。否则，您可能会认为客户端的流程是安全的。客户端验证始终是可选的。当然，这可能会节省一些对服务器的错误请求，但是如果有人真的想上传图像，他可以绕过它。谢谢你的回答。但大多数答案的问题是，他们使用jQuery，我还不能，遗憾的是，我没有时间学习（请查看相关主题。他不是在使用JQuery获取图像信息。他是在使用JQuery修改DOM。在现代浏览器上，您不需要JQuery来获取这些信息。如果您担心与旧浏览器的兼容性，只需验证服务器端即可。谢谢您的回答。但大多数答案的问题是，它们使用的是j。）但我还不能，遗憾的是我没有时间去学习（请查看相关主题。他不是使用JQuery获取图像信息。他是使用它来修改DOM。在现代浏览器上，您不需要JQuery来获取这些信息。如果您对与旧浏览器的兼容性感到不安，只需验证服务器端即可。它成功了！谢谢！我可以问一下这些行是怎么做的吗？“var srcChunks=image.src.split（”）；var fileExtension=srcChunks[srcChunks.length-1].toLowerCase（）；“@Ingmarsh使用“.”作为分隔符拆分文件名，并使用最后一个，因此它是实际的扩展名。例如，您有一个名为“hello.world.jpg”的文件。他的代码将只使用“jpg”。按照For循环到che的方式。”

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