【发布时间】：2017-03-03 06:51:39
【问题描述】：
我在 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[]"/>，而不是在选择图片后它可以显示图片。我想尝试验证文件是图像文件，图像上的宽度和高度
我的问题是，如果我选择了错误图像（不在标准中），则按钮将被禁用，但如果在下一次选择中，我选择真实图像，则按钮恢复正常。我知道这会发生，因为我不检查之前选择的旧图像，这是我的问题，我不知道如何检查。
大家能帮我解决一下这个问题吗？
【问题讨论】：
-
你能在sn-p中添加你的代码吗？
-
您提供的代码不再叫sn-p，因为它太长了。尝试将您的逻辑分解成更小的部分并提供所需的部分。
-
可能需要一些html代码
标签： javascript jquery html image