Bug di caricamento file di Chrome: l'evento di modifica non verrà eseguito due volte con lo stesso file

Question

Sto lavorando su questo plugin per uploader di file html5 ma ha un bug su Google Chrome che non riesco a capire e risolvere. Funziona bene su Firefox.

jsfiddle link

Il problema è che non si può caricare lo stesso file due volte dal desktop.

Quando si fa clic per la prima volta, si seleziona e si preme OK per caricare un file dal desktop, è necessario avvisare un messaggio, ad esempio ". Pulsante-1" - dipende dal pulsante di caricamento su cui si fa clic.

Poi, se si tenta di caricare lo stesso file ancora una volta, non viene eseguita più questa riga di codice,

$(".upload-file",object_parent).change(function() { 

      ... 
      ... 

      alert($cm.selector); 

}); 

Qualche idea di cosa va storto in questo plugin?

(function($){ 

    // Attach this new method to jQuery 
    $.fn.extend({ 

     // This is where you write your plugin's name 
     upload_file_html5: function(options) { 

      // Set the default values, use comma to separate the settings, example: 
      var defaults = { 
       objectSuperparent: '.media' 
      } 

      var options = $.extend(defaults, options); 
      var o = options; 

      var $cm = this.click(function(e){ 

       // <a> button is the object in this case. 
       var object = $(this); 

       // Get other info from the element belong to this object group. 
       var object_href = object.attr('href'); 
       var object_parent = object.parent(); 
       alert($cm.selector); 

       // Trigger the click event on the element. 
       // Due to security policies triggering click on the input type=file is not allowed/supported in some browsers and Opera is one of them. 
       //$('input[type=file]').trigger('click'); // or: 
       $(".upload-file",object_parent).click(); 

       return false; 

      }); 

      // Trigger ajax post when ever the file is changed by the user. 
      var $cm_2 = $(".upload-file").change(function(){ 

       // <input> is the object in this case. 
       var object = $(this); 

       var object_form = object.parent(); 
       var object_superparent = object.parents(o.objectSuperparent); 
       var path_config = $($cm.selector,object_superparent).attr('href'); 
       var path_post = object_form.attr('action'); 

       alert($cm.selector); 
       //alert(path_config); 

       .... 
       .... 

      }); 

     } 
    }); 

})(jQuery); 

che stava lavorando OK su Chrome, ma solo di recente fallito, probabilmente Chrome ha aggiornato la versione più recente per la mia macchina e questo aggiornamento fa sì che il bug?

Answer 1

Sì. Il mio Chrome ha un comportamento diverso rispetto a Firefox, ma penso che Chrome sia corretto.

Secondo W3C's document:

evento onchange si verifica quando un controllo perde il focus e il suo valore è stato modificato dopo guadagnando attenzione

se si tenta di caricare lo stesso file, il valore di input di file non cambia. Provare a stamparlo:

$('.button-2').click(function(){ 
    console.log($(".list .upload-file").val()) 
    return false; 
}); 

Answer 2

Se si desidera caricare due volte, un chiaro valore di ingresso di file

$('input[type="file"]').val(null); 

jsfiddle test

Answer 3

potrebbe essere che l'ingresso sia in fase di ri-rendering. Per qualsiasi motivo questo possa essere, per me è irrilevante. La funzionalità $ .on ('cambia', callback) viene persa.

Provare a utilizzare la funzione .delegate che adoro assolutamente! http://api.jquery.com/delegate/

Ok quindi delegato è esattamente lo stesso, si dice solo jquery se c'è un elemento resa su schermo con una particolare maniglia, allegare una funzionalità ad esso.

Quindi, anche se l'elemento viene nuovamente sottoposto a rendering, continuerà a funzionare.

$(document).delegate('.file_upload_btn', 'change', function(){}); 

si potrebbe pensare questo è una funzione & buttare via dire che cosa è la differenza, ma questo mi ha salvato un sacco di tempo su progetti.