2011-04-14 19 views
166

Olası Çoğalt: jQuery - Bir dosya dosya girişinde seçilmiş ise algılama


jQuery: get the file name selected from <input type=“file” />

Ben standart dosya giriş kutusu da

<input type="file" name="imafile"> 

Ben

adresinden aşağı bir miktar metin bulun
<span class="filename">Nothing selected</span> 

Metin güncelleştirmesinin dosya giriş kutusunda seçilen dosyanın adıyla mümkün olup olmadığını mı merak ediyordum?

Alkış,

+4

@jnpcl - O sonrası ne kadar aynı şeyi yapıyor sanmıyorum ben – BigJobbies

+0

yapmak istiyorum ' 'alanının' filename'ini görüntüler. Bu tam olarak değil ** tam olarak ne yapmak istiyorsun? – drudge

+3

Kullanıcı bir dosya seçtiğinde * bir olayın tetiklenmesini ister. Bu, bir dosya seçildikten sonra ismini almaktan açıkça farklıdır. Bu, bu bir kopyası değildir. Aynı dosya tekrar seçildiyse – MetalPhoenix

cevap

254

Sen girdi onchange olayına bir olay işleyicisi ekleyin ve sizin yayılma metni ayarlamak için bir işlevi çağırmak zorunda gerekir.

<script type="text/javascript"> 
    $(function() { 
    $("input:file").change(function(){ 
     var fileName = $(this).val(); 
     $(".filename").html(fileName); 
    }); 
    }); 
</script> 

Sen DOM'da diğer dosya girişleri veya açıklıklı olup söz konusu unsurların özgü olacak şekilde o bağlı olarak seçin, böylece giriş ve span kimlikleri eklemek isteyebilirsiniz.

+26

'onchange' çağrılmıyor. Bunu nasıl aşabilirim ..? – shashwat

+1

@shashwat Bu sorunun üstesinden gelmek için değişimi değiştirmek yerine canlı kullanabilirsiniz. Örnek: $ ("input: file") kodunu değiştirin, $ ("input: file") olarak değiştirin. –

+7

@shashwat girişinin tıklama olayına bağlanın ve giriş değerini null olarak ayarlayın. –

11

Değişiklik olayını denemenizi öneririm? eğer bir değeri olup olmadığını görmek için sınayın ve kodunuza devam edebilirsiniz. jQuery

.bind("change", function(){ ... }); 

Veya benzeri değerler

.change(function(){ ... }); 

sahiptir.

http://api.jquery.com/change/

benzersiz seçici için id adınız özelliğini değiştirmek ve sonra jQuery("#imafile") veya tüm dosya girişler için genel jQuery('input[type="file"]')

İlgili konular