Javascript HTML5表单检查图像宽度和高度，如果较大，则发出警报

编辑

不是复制品

如果文件的维度大于而不是大小，则需要停止表单提交。其他帖子中的一些答案是关于文件大小的，我的问题是关于尺寸的。大小和尺寸是两个不同的东西

我正在使用以下表单上载图像。它的工作很好，但因为它是一个商店，我希望产品目录看起来不错，我需要上传的图像准确的200px的宽度和200px的高度。如果图像的宽度或高度较大，我需要显示一个警报，以便上传者选择另一个图像或编辑他试图上传的图像

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('here we have to do something');
        });
    </script>

</form>

上载图像：
$（“#图像文件”）.bind（'change'，function（）{
警惕（“我们必须做点什么”）；
});

是否可能重复？摘自此处的答案，并为您改编：

我同意上述答案，并在提交表格上填写：

$（文档）.ready（函数（）{
$（“#图像表格”）。提交（功能（e）{
var form=此；
e、 preventDefault（）；//暂时停止提交
//替换为选择器以查找表单中的文件输入
var fileInput=$（this）.find（#图像文件“）[0]，
file=fileInput.files&&fileInput.files[0]；
console.log（文件）
如果（文件）{
var img=新图像（）；
img.src=window.URL.createObjectURL（文件）；
img.onload=函数（）{
变量宽度=img.naturalWidth，
高度=img.自然高度；
window.URL.revokeObjectURL（img.src）；
if（width google search发现了一个类似的问题：文件大小与宽度和高度不同我以前的链接编辑是关于“大小”的，使用文件API。这一个与宽度+高度验证直接相关：您知道您标记为正确的答案是另一个问题/答案的复制和粘贴：）这是一个副本。上传前可以检查图像尺寸吗？

jusysayno的答案中的链接是他从->获得答案内容的地方->似乎你是唯一了解检查文件大小和检查宽度高度之间差异的人…我将给它一个tryno，我用Chrome和表单提交时没有警告。修复了它。我会在没有“#”的情况下设置$（“#ImageForm”）选择器。Js Fiddle我已将此更改为一个，它工作几乎完美，因此我将您的解决方案标记为正确。