2017-03-03 32 views
0

我對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[]"/>將被添加,比圖片被選中後,它可以顯示圖像。我想要驗證文件是一個圖像文件,圖像的寬度和高度

我的問題是,如果我選擇了假圖像(不是在標準中)該按鈕將被禁用,但如果在下一次選擇,我選擇真正的圖像按鈕恢復正常。我知道這會發生,因爲我不檢查之前選擇的舊圖像,這是我的問題,我不知道如何檢查它。

夥計們你能幫我解決這個問題嗎?

+0

你能在片段添加代碼? – Ruby

+1

您提供的代碼不再稱爲片段,因爲它太長了。嘗試將你的邏輯分解成更小的部分並提供所需的部分。 – Benjamin

+0

也許需要一些html代碼 – blackmiaool

回答

0

首先我想說抱歉,因爲我的代碼不清楚。

得到的答覆我的問題和一些代碼將被改變,新的代碼將被添加

我使用的JavaScript localStorage保存的圖像數據,所以,我可以檢查已加載的最後影像。

這是我如何檢查我的圖片與localStorage

function check_image() { 
     var images_log = JSON.parse(localStorage.getItem("images")); 
     var type_reg = /^image\/(jpg|png|jpeg)$/; 
     if(images_log != ""){ 
      for(var i=0;i<images_log.length;i++) { 
       if(images_log[i]['type'] != undefined){ 
        if(!type_reg.test(images_log[i]['type'])){ 
         $("#submit").prop("disabled", true); 
         break; 
        }else{ 
         $("#submit").prop("disabled", false); 
        } 
       } 
       if (images_log[i]['width'] < 700 && images_log[i]['height'] < 650) { 
        $("#submit").prop("disabled", true); 
        break; 
       }else{ 
        $("#submit").prop("disabled", false); 
       } 
      } 
     }else{ 
      $("#submit").prop("disabled", false); 
     } 
    } 

對於所有的代碼我在寫的問題,我會通過部分解釋它的一部分。

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

     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>'); 
     }); //added a new input file and delete button 

     $(wrapper).on("click",".remove_field", function(e){ 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
      if(($('#file_input').val()) == undefined){ 
       $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>'); 
      } 
     }); //if the delete button clicked, it will remove the input and the delete button 

從那個部分,我做了一個簡單的按鈕新input file,這時候點擊新<input type="file">將增加,並有一個新的按鈕,刪除該<input type="file">

這部分是如何調用圖像加載,併爲圖像添加新的div。

$('body').on('change', '#file_input', function() { 
     var image = new Image ; 
     if (this.files && this.files[0]) { 

      //i add new var to check the file type 
      var type = this.files[0].type; // received the type of the file; 
      var type_reg = /^image\/(jpg|png|jpeg)$/; //for validate the file type 


      abc += 1; 
      //this var already loaded in top of script which for sign the image delete button id, and the images id 

      $(this).after("<div id='delete_image" + abc + "' class='delete_image'></div><img class='images_view' width='300' height='200' id='previewimg" + abc + "' src=''/>"); 
      //add a new div class for the images. 

      var reader = new FileReader(); 
      reader.onload = imageIsLoaded; 
      reader.readAsDataURL(this.files[0]); 
      $(this).hide(); 
      // for showing the images by call imageIsLoaded function, and hide the <input type="file"> 

這部分是用於刪除圖像,如果delete_image ID被點擊它會刪除圖像和<input type="file">比刪除從localStorage的images_id;

  $("#delete_image" + abc).append($("<img/>", { 
       id: 'img', 
       src: '<?=base_url('asset/images/BG/close.png')?>', 
       alt: 'delete' 
      }).click(function() { 
       var preview_id = $(this).parent().parent().find('.images_view').attr('id'); 
       var images_log = JSON.parse(localStorage.getItem("images")); 
       if(images_log != "null" || images_log != null || images_log.length != 0){ 
        for (i=0;i<images_log.length;i++){ 
         if(preview_id == images_log[i]['id']){ 
          images_log.splice(i,1) 
         } 

        } 
       } 
       localStorage["images"] = JSON.stringify(images_log); 
       $(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>'); 
       } 
       check_image(); 
      })); 

這裏是驗證。

 //here i changed my code how i disabled the button from on this to call a check_image() function and start using localStorage 

     if (type_reg.test(type)) { //check the file is an images file with jpg, png and jpeg 

      image.onload = function() { 

       //get the last localstorage and added it if a new images 

       var images_arr = localStorage.getItem("images"); 
       var obj = []; 
       if(images_arr){ 
        obj= JSON.parse(images_arr); 
       } 
       obj.push({"id": "previewimg" + abc, 'width' : this.width,'height' : this.height}); 
       localStorage.setItem("images",JSON.stringify(obj)); 

       //checked the image height and width showing the alert, and call the check_image() function 

       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, Please use another image!"); 

        check_image(); 
       }else{ 
        check_image(); 
       } 
      }; 
     } else { 
      alert('This file type is unsupported.'); 
      var images_arr = localStorage.getItem("images"); 
      var obj = []; 
      if(images_arr){ 
       obj= JSON.parse(images_arr); 
      } 
      obj.push({"id": "previewimg" + abc, 'type' : this.files[0].type}); 
      localStorage.setItem("images",JSON.stringify(obj)); 
      check_image(); 
     } 


      image.src = _URL.createObjectURL(this.files[0]); 
     } 

    }); //end for ('body').on('change', '#file_input', function() 

對於負載的圖片:

function imageIsLoaded(e) { 
     $('#previewimg' + abc).attr('src', e.target.result).parent().find('.remove_field').remove(); 
    } 

這就是我如何上傳多張圖片,顯示在上傳之前的圖像,並驗證該文件。

我很抱歉,如果這個代碼是太長了,因爲我覺得在第一次對不起,我不寫代碼太清楚,所以在這裏我解釋一下我的代碼是如何工作的

2

這裏有這麼多的錯誤:)

首先;

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]) { 

,你應該打破這個代碼,並在我的建議,你應該從頭開始寫它..

+0

如果我的代碼對你來說不太清楚,但對於你提到的部分,我沒有看到我的項目中有任何bug,我通常可以輸入多個圖像,顯示圖像,我可以在javascript中刪除圖像,選擇要刪除的圖像 – Kelvin

+0

可能在jsfiddle中重新創建場景會更容易看到發生了什麼事情..也可能有其他一些js代碼.. –

相關問題