SORU
5 Temmuz 2009, Pazar


input type=file Haritayı tek düğme

Stili (veya komut) için bir yol <input type=file /> görünür olması öğe yalnızca "saha olmadan metin?" Gözat düğmesi var

Teşekkürler

Edit: Sadece nedenini açıklamak için buna ihtiyacım var. http://www.morningz.com/?p=5 Çoklu dosya upload kodu kullanıyorum ve hiç bir değeri var çünkü giriş metin alanına ihtiyacı yok. Script sadece sayfasında koleksiyona yeni seçilen dosya ekler. Eğer mümkünse daha iyi bir metin alanı olmadan durur.

CEVAP
7 EKİM 2011, Cuma


Bir kez bunu gerçekleştirmek için çalışırken bir halt yiyordum. Flash bir çözüm kullanmak istemedim ve baktım jQuery kütüphaneleri hiçbiri tüm tarayıcılarda güvenilir.

Tamamen CSS uygulanan benim çözümüm, geldim (düğmesinin görünmesi için özelliği stil değişikliği dışında 'tıklandığında').

Çalışan bir örneği burada deneyebilirsiniz:6* *(5 FF, Opera 11 9 Safari, IE 7, Chrome 14 Test)

Büyük bir dosya girişi (font-size:50px ile), sabit bir boyutu vardır; gizli taşma bir div içinde sarma sonra oluşturarak çalışır. Giriş bu "" div. pencereden görünür. Div arka plan görüntüsü veya renk verilebilir, metin eklenebilir ve giriş şeffaf div arka planını ortaya çıkarmak için yapılır

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Bana eğer herhangi bir sorun varsa bunu düzeltmek için çalışacağım.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Associated Press

    Associated P

    18 EYLÜL 2006
  • Branboy3

    Branboy3

    12 AĞUSTOS 2012
  • majesticdubstep

    majesticdubs

    3 Kasım 2011