Error de carga de archivos Chrome: el evento de cambio no se ejecutará dos veces con el mismo archivo

Question

Estoy trabajando en este complemento de carga de archivos html5 pero tiene un error en Google Chrome que no puedo entender y solucionar. Funciona bien en Firefox.

jsfiddle link

El problema es que no se puede cargar el mismo archivo dos veces desde su escritorio.

Cuando hace clic por primera vez, selecciona y presiona OK para cargar un archivo desde su escritorio, debe alertar a un mensaje, por ejemplo '.button-1' - depende del botón de carga en el que haga clic.

Entonces, si intenta cargar el mismo archivo de nuevo, esta línea de código no se ejecutará más,

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

      ... 
      ... 

      alert($cm.selector); 

}); 

Cualquier idea de lo que va mal en este 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); 

que estaba trabajando bien en Chrome, pero sólo fallaron recientemente, probablemente Chrome ha actualizado una versión más reciente de mi máquina y esta actualización hace que el error?

Answer 1

Sí. Mi Chrome tiene un comportamiento diferente a Firefox, pero creo que Chrome es correcto.

Según W3C's document:

evento onchange ocurre cuando un control pierde el foco de entrada y su valor se ha modificado desde que obtuvo enfoque

si intenta cargar el mismo archivo, el valor de entrada de archivo no cambia. Tratar de imprimirlo:

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

Answer 2

Si desea cargar dos veces, el valor de entrada de archivo clara

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

jsfiddle test

Answer 3

podría ser que la entrada está siendo re-prestados. Por alguna razón, esto puede ser, para mí es irrelevante. Se pierde la funcionalidad $ .on ('cambio', devolución de llamada).

¡Intenta usar la función .delegate que me encanta! http://api.jquery.com/delegate/

Ok, así delegar es exactamente lo mismo, simplemente le dice a jquery si hay un elemento representado en la pantalla con un identificador en particular, adjuntarle una funcionalidad.

Por lo tanto, aunque el elemento se vuelva a renderizar, seguirá funcionando.

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

Usted puede pensar que esto es una función tirar & decir cuál es la diferencia, pero esto me ha ahorrado mucho tiempo en los proyectos.