Błąd przesyłania pliku Chrome: po zmianie zdarzenie nie zostanie wykonane dwukrotnie z tym samym plikiem

Question

Pracuję nad tym wtyczką do przesyłania plików HTML5, ale ma błąd na Google Chrome, którego nie mogę zrozumieć i naprawić. Działa dobrze na Firefox.

jsfiddle link

Problemem jest to, że nie możnaprzesłać ten sam plik dwukrotnie z pulpitu.

Po pierwszym kliknięciu, wybraniu i naciśnięciu przycisku OK w celu przesłania pliku z pulpitu, powinien on ostrzec wiadomość, na przykład ".button-1" - w zależności od kliknięcia przycisku przesyłania.

Następnie jeśli spróbujesz przesłać ten sam plik znowu, ta linia kodu nie będą już wykonywane,

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

      ... 
      ... 

      alert($cm.selector); 

}); 

Każdy pomysł co jest nie tak w tej wtyczki?

(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); 

W Chrome działało OK, ale niedawno się nie udało, prawdopodobnie Chrome zaktualizował najnowszą wersję do mojego komputera, a ta aktualizacja powoduje błąd?

Answer 1

Tak. Mój Chrome ma inne zachowanie niż Firefox, ale uważam, że Chrome jest poprawny.

Według W3C's document:

onChange przypadku pojawia się, gdy kontrola traci fokus i jego wartość została zmodyfikowana od czasu uzyskania ostrości

jeśli spróbujesz przesłać ten sam plik, wartość wejścia pliku nie zmienia się. Spróbuj wydrukować go:

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

Answer 2

Jeśli chcesz przesłać dwukrotnie wyraźną wartość input file

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

jsfiddle test

Answer 3

może okazać się, że wejście jest ponownie renderowane. Z jakiegoś powodu może to być, dla mnie, nieistotne. Funkcja $ .on ("zmiana", oddzwonienie) zostanie utracona.

Spróbuj użyć funkcji .delegate, którą absolutnie kocham! http://api.jquery.com/delegate/

OK, więc delegat jest dokładnie taki sam, po prostu mówi jquery, czy jest element renderowany na ekranie z określonym uchwytem, ​​dołącz do niego funkcjonalność.

Więc nawet jeśli element jest ponownie renderowany, nadal będzie działał.

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

Możesz myśleć, że jest to wyrzucić funkcja & powiedzieć, co jest różnica, ale to uratowało mi dużo czasu na projekty.