2012-02-06 14 views
18

Bu html5 dosya yükleyici eklentisi üzerinde çalışıyorum ama anlayamadığım ve düzeltemediğim Google Chrome üzerinde bir hata var. Firefox'ta iyi çalışıyor. Chrome dosya yükleme hatası: on değişiklik olayı aynı dosya ile iki kez yürütülmeyecek

jsfiddle link

sorun

Eğer masaüstünüzden aynı dosyayı iki kez yükleyemezsiniz olmasıdır. İlk seçeneğini tıklatın ve masaüstünüzden bir dosya yüklemek için OK vurduğunda

, bu .button-1' örneğin bir mesaj uyarı olmalıdır - tıkladığınızda hangi yükle düğmesi bağlıdır.

yeniden aynı dosyayı yüklemeye çalışırsa, bu kod satırı artık yürütülmez

,

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

      ... 
      ... 

      alert($cm.selector); 

}); 

bu eklenti nelerin yanlış gittiğini biliyor musunuz?

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

O Chrome'da Tamam çalışıyordu ama sadece muhtemelen Krom benim makineye bir son sürümünü güncelledi, son zamanlarda başarısız oldu ve bu güncelleştirme hata neden olur?

cevap

10

Evet. Chrome'umun Firefox'ta farklı davranışları var, ancak Chrome'un doğru olduğunu düşünüyorum. W3C's document göre

: Bir kontrol girişi odağını kaybettiğinde ve değeri aynı dosya yüklemek için çalışırsanız, değerini odağı

kazanıyor sonra değiştirilmiş zaman

onchange olay meydana gelir dosya girişi değişmez. çıktısını deneyin:

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

teşekkürler. O zaman onchange olayını kullanmamalıyım?veya aynı dosyayı yükleyebilmem için herhangi bir şekilde yapabilir miyim? – laukok

+0

bir çalışma çözümü için aşağıdaki @ fundon [cevap] (https://stackoverflow.com/a/11280864/2024242) aşağıya bakın –

38

iki kez yüklemek istiyorsanız, berrak dosya giriş değeri

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

jsfiddle test

+0

Ben jsfiddle bağlantısını kaldırmak, "objectSuperparent" ve tüm kod biraz karıştırır . –

+0

Teşekkürler arkadaşım, sen benim problemimi çözdün – Alireza

+0

Teşekkür ederim, saçlarımı bunun üzerinden çekiyordum! – NateQ

2

o girdi yeniden oluşturulmakta olan bu olabilir. Her ne sebeple olursa olsun, bu benim için alakasız. $ .on ('change', callback) işlevselliği kaybedildi.

mutlaka aşk .delegate işlevini kullanarak deneyin! http://api.jquery.com/delegate/

Tamamen temsilci tamamen aynıdır, yalnızca belirli bir tanıtıcıyla ekran üzerinde işlenen bir öğe varsa jQuery'ye bir işlev ekler. eleman-render yeniden olsa bile

Yani, hala işlev tutacak.

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

Sen fark ancak bu projeler üzerinde bana çok zaman kurtardı neyin demek bu atmak fonksiyonu & olduğunu düşünebilir.