javascript - 如何检查jquery调用的所有图像的宽度和高度？

Question

我在 jquery 图像上遇到问题，我需要验证所有图像已被单击或使用 jquery 显示

这是我的代码，我如何添加新图像并显示图像

<script>
true_image = false;
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){

    var abc = 0;
    var wrapper         = $(".images");
    var add_button      = $("#add_more");

    var x = 1;
    $(add_button).click(function(){

        x++;
            $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
    });

    $(wrapper).on("click",".remove_field", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });



    $('body').on('change', '#file_input', function() {
        var image ;
        if (this.files && this.files[0]) {
            image = new Image;
            image.onload =function() {
                console.log("width : "+this.width+" height: "+this.height);
                if(this.width < 700 || this.height < 650){
                    alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel");
                    $("#submit").prop("disabled",true);
                }else{
                    $("#submit").prop("disabled",false);
                }
            };
            image.src = _URL.createObjectURL(this.files[0]);
            if(true_image == true){
                abc += 1;
                var z = abc - 1;
                var x = $(this).parent().find('#previewimg' + z).remove();
                $(this).after("<div id='abcd" + abc + "' class='abcd'></div><img class='images_view'  width='300' height='200' id='previewimg" + abc + "' src=''/>");
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
                $(this).hide();
                $("#abcd" + abc).append($("<img/>", {
                    id: 'img',
                    src: '<?=base_url('asset/images/BG/close.png')?>',
                    alt: 'delete'
                }).click(function() {
                    $(this).parent().parent().remove();

                    if(($('#file_input').val()) == undefined){
                        $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
                    }
                }));
            }

        }

    });

    function imageIsLoaded(e) {

        $('#previewimg' + abc).attr('src', e.target.result);


        $('.remove_field').hide();
    };

    $('body').on('click', '.images_view', function() {
        abc += 1;
        var cover = false;
        var image_id = this.id;
        $('.images_view').filter(function( index ) {
            if($( this ).attr( "id" ) === image_id){
                $(this).parent().find('#file_input').attr('name','cover');
                $(this).parent().find('#cover').remove();
                $(this).parent().append("<span class='cover' id='cover'>Cover</span>");
            }else{
                $(this).parent().find('#file_input').attr('name','file[]');
                $(this).parent().find('#cover').remove();

            }
        })

    });
});
</script>

从上面的代码中，我尝试上传多图像，因此我添加了一个按钮，然后单击一个新的 <input id="file_input" class="images_file" type="file" name="file[]"/>将被添加，而不是在选择图像后它可以显示图像。我想尝试验证该文件是否为图像文件、图像的宽度和高度

我的问题是，如果我选择了错误图像(不在标准中)，按钮将被禁用，但如果在下一个选择中，我选择真实图像，按钮将恢复正常。我知道会发生这种情况，因为我没有检查之前选择的旧图像，这是我的问题，我不知道如何检查它。

大家能帮我解决这个问题吗？

Answer 1

这里发生了很多错误:)

首先；

var add_button      = $("#add_more");

var x = 1;
$(add_button).click(function(){ 

你应该这样做(add_button 已经被指定为 jQuery 对象):

add_button.click(function(){ 

当您单击 add_button 时，您会插入许多具有相同 id 的文件输入:

$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field"></img><div>');

并且您通过在此处分配来调用许多输入:

$('body').on('change', '#file_input', function() {

因此对于相同的 id 它将触发多次。如果在单个输入中选择多个文件，它也无法正常工作，因为您只在此处检查第一个文件:

if (this.files && this.files[0]) {

正如评论中提到的，您应该分解此代码，并且在我的建议中您应该从头开始编写它..