Question

修改

不是重复的

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

我使用以下表单上传图片。它工作正常，但因为它是一个商店，我希望产品目录看起来不错我需要上传的图像正好是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>

Answer 1

可能重复吗？取自这里的答案，并适合你：

Is it possible to check dimensions of image before uploading?

我同意上述答案，并在表格提交上执行：

$( document ).ready(function() {
$("#ImageForm").submit( function( e ) {
    var form = this;
    e.preventDefault(); //Stop the submit for now
                                //Replace with your selector to find the file input in your form
    var fileInput = $(this).find("#image-file")[0],
        file = fileInput.files && fileInput.files[0];
	console.log(file)
    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 <= 200 && height <= 200) {
                form.submit();
            }
            else {
                alert('too big');
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ImageForm" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />
</form>

正如我的链接中的答案所说，您还需要将此服务器端检查为a）您不能信任客户端b）旧浏览器可能无法正常工作。

HTML5表格检查图像的宽度和高度，如果更大则提醒

1 个答案: