我對jQuery的形象,我需要驗證所有的圖像已經被點擊或使用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[]"/>
將被添加,比圖片被選中後,它可以顯示圖像。我想要驗證文件是一個圖像文件,圖像的寬度和高度
我的問題是,如果我選擇了假圖像(不是在標準中)該按鈕將被禁用,但如果在下一次選擇,我選擇真正的圖像按鈕恢復正常。我知道這會發生,因爲我不檢查之前選擇的舊圖像,這是我的問題,我不知道如何檢查它。
夥計們你能幫我解決這個問題嗎?
你能在片段添加代碼? – Ruby
您提供的代碼不再稱爲片段,因爲它太長了。嘗試將你的邏輯分解成更小的部分並提供所需的部分。 – Benjamin
也許需要一些html代碼 – blackmiaool