2013-04-19 24 views
6

açık iletişim tetiklendiğinde bir yere bir input type="file" varsa IE8/9 input type = "Dosya" göndermek ve bazı bağlantı tıklama aynı zamanda dosya girişinde bir tıklama tetikler nasıl yapılır. Kullanıcı bir dosya seçer.javascript

IE8/9'da, kullanıcı bir button type="submit" numaralı telefonu tıklarsa, ilk tıklatma dosya girişindeki tüm verileri temizler, sonra ikincisi boş bir form gönderir. Bunu nasıl

Ben input type="file" sunulması bir javascript tıklama tetiği sonrası izin verir.

bazı notlar:

  • tık başka click olayı sonucu tetiklendi. Etkinlik içinde.
  • Giriş tipi = "dosya" görüntülenecek şekilde ayarlanmamıştır: yok. kullanıcı girişini işlemek için hiçbir girişimde

Fikirler yapıldı?

+0

jQuery kullanabilir miyim? –

+0

@ThanhTrung bu nasıl yardımcı olur? Bu yapılamaz. – Esailija

+0

@Esailija Sadece bir soru. Yerel javascript kullanarak, tarayıcılar arası uyumluluğu sağlamak zordur. IE'de gerekebilir, ancak FF veya Chrome'da olmayacaktır. Bu yüzden jQuery/Mootools/Prototype çözümüne ihtiyacınız olup olmadığını soruyorum ... jQuery'de '.click()' yöntemi var. –

cevap

2

jquery fileupload extension'u kullanmanın daha iyi olduğunu anladım. Bu karışıklıkları elimle yapabildiğimden çok daha iyi idare ediyor. Temel olarak jquery'nin x-browser dom manipülasyonu için & ajax'in yaptığı, ancak input type = "file" için yaptığı şeydir.

5

Aynı sorunla uğraşıyorum ve henüz temiz bir çözüme rastlamadım. Bununla birlikte, çalışmamı keşfetmiş bulunmaktayım. Lütfen aşağıdaki çözümlerin en iyi uygulamaları tamamen göz ardı ettiğini (benim düşünceme göre) ve bunun daha iyi, daha standartlara uygun bir yoluna sahip olduğunu düşünüyorsanız, lütfen buraya gönderin. düğme tıklama olayı araştırma adil bir miktar sonra

Tespit

, onlar kesinlikle onların düğmenin üzerine derhal <input type="file" /> konumlandırmak ve sıfıra set donukluk sayede birçok insan bir hile kullanıyor görünüyor. Bu, kullanıcı için, bir düğmeye tıklamak gibi görünüyor, ancak tarayıcı, <input type="file" /> üzerinde bir tıklama olarak görür (ve böylece IE'de belirtilen sorunu önler). Quirksmode'un aslında bu yaklaşımı önerdiğini gördüğüme şaşırdım.

Tespit düğme stilleri

Şimdi, bu daha da kozmetik sorunlar tanıtmak yapar; z (yani düğmenin içinde <input type="file" /> yerleştirilen sürece) düğmeleri artık onların :hover ve :active BB sözde sınıfları tetiklediğini ve fare imleci muhtemelen varsayılan fare imlecini olacağını bulabilirsiniz, herhangi CSS rağmen size <input type="file" /> uyguladığınız ya da düğmen.

sınıflar ile kolay bir düzeltme vardır bir JavaScript iş çevresinde (bunu size bırakacağım), ancak imleç hala bir konudur. Garip, sen <input type="file" \> sağ path tarafının cursor biçimlendirebilirsiniz fakat bu o Browse düğme etkilemez. Ne yazık ki bu (şimdi saydam) düğmesi muhtemelen stilize düğmenizin bir kısmı üzerinde olacak ve vurgulu bir varsayılan imleç ile sonuçlanacak.

Bunu çözmek için, ben (JSFiddle here) this work-around tökezledi. Temel olarak, bir kişi kendi düğmesini mousemove olayına bağladı ve düğmenin üzerine geldiğinde her zaman fare imlecinin altında <input type="file" /> sağ tarafını konumlandırdı.Bu, düğmenin sabit bir boyutu ve overflow: hidden ayarında olmaması durumunda, <input type="file" /> düğmesinin koordinatlarının dışına tıklanmasını engellemek için bir miktar artırılmalıdır.

Sonuç

Genel olarak, ben <input type="file" /> stil sadece değmez olduğunu tespit ettik; Çok fazla korsan var, ve eğer gerçekten iyi görünmesini istiyorsanız JavaScript'i bir noktada kullanmanız gerekecek (JavaScript'i devre dışı bırakan kişileri desteklemeye çalışıyorsanız çok iyi değil). Bunun da cep telefonunu nasıl etkilediği hakkında hiçbir fikrim yok. Eğer Html5 File API destekleyen yeni tarayıcılar hedefliyorsanız

,/AJAX sürükle uygulamak yükleme çözümü damla (here güzel bir hayvan) ve tamamen <input type="file" /> kurtulmak. Desteklemeyenler için (eski tarayıcı ve JavaScript devre dışı olanlar), geri bırakılmış <input type="file" />'u bir geri dönüş olarak bırakın.

+0

Teşekkürler, bunu deneyeceğim. –

+0

Bu talimatların yükleme sorununu nasıl çözdüğünü anlamıyorum. Tüm bunlar, güzel bir CSS yükleyicinin nasıl uygulanacağına, IE'de başarılı bir yüklemeye nasıl hitap edeceğine değil, giriş tipi dosya alanlarının temizlenmesinden kaçınmaya dair daha fazla yorum. – Mrdev