Pek çok insan gibi ben de çirkin olanı özelleştirmek isterim input type=fileve bazı hackler ve / veya hackler olmadan yapılamayacağını biliyorum javascript. Ancak, benim durumumda dosya yükleme düğmeleri yalnızca resim yüklemek içindir ( jpeg | jpg | png | gif ), bu yüzden clickabletam olarak bir girdi türü dosyası ( iletişim kutusunu ve gönderilen sayfada aynı $ _FILE gösterin). Burada
bazı geçici çözümler buldum ve bu da ilginç (ancak Chrome = / üzerinde çalışmıyor).

Dosya düğmelerinize biraz stil eklemek istediğinizde ne yaparsınız? Bununla ilgili herhangi bir bakış açınız varsa, cevap düğmesine basmanız yeterlidir;)

Bu benim için gerçekten işe yarıyor:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>

Temel olarak, etiketin for özelliği, bunu , etikete tıklamak, belirtilen girdiye tıklamakla aynı olmasını sağlar .

Ayrıca, hiçbiri olarak ayarlanan display özelliği, dosya girdisinin hiç işlenmemesini sağlar, güzel ve temiz bir şekilde gizler.

Chrome'da test edilmiştir, ancak web'e göre tüm büyük tarayıcılarda çalışmalıdır. :)

DÜZENLEME: Buraya JSFiddle eklendi: https://jsfiddle.net/c5s42vdz/

Aslında saf css ile yapılabilir ve oldukça kolaydır ...

HTML Kodu

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS Stilleri

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

Buradaki fikir, girişi kesinlikle etiketinizin içine yerleştirmektir. girdinin yazı tipi boyutunu büyük bir değere ayarlayın, bu da "göz at" düğmesinin boyutunu artıracaktır. Ardından, giriş gözatma düğmesini etiketinizin arkasına konumlandırmak için negatif sol / üst özelliklerini kullanmak biraz deneme yanılma gerektirir.

Düğmeyi konumlandırırken, alfayı 1'e ayarlayın. Bitirdiğinizde tekrar 0'a ayarlayın (böylece ne yaptığınızı görebilirsiniz!)

Tarayıcılar arasında test ettiğinizden emin olun çünkü hepsi giriş düğmesini biraz farklı bir boyuta çevirecektir.

@Hardsetting ile harika bir çözüm, ancak Windows'ta Safari (5.1.7) ile çalışmasını sağlamak için bazı iyileştirmeler yaptım

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

Ben kullandım visibility: hidden, width:0yerine display: nonesafari sorunu için ve katma pointer-events: noneiçindeimg girdi dosya türü etiketi FORM etiketinin ise çalışma yapmak için etikette.

Tüm büyük tarayıcılarda benim için çalışıyor gibi görünüyor.

Umarım birine yardımcı olur.

Ben kullanırım SWFUpload veya Uploadify . Flash'a ihtiyaçları var ama istediğiniz her şeyi zahmetsizce yapıyorlar.

<input type="file">Gerçek kontrole tıklamak dışında bir yolla "dosya aç" iletişim kutusunu tetiklemeye çalışan herhangi bir temel çözüm, güvenlik nedenleriyle herhangi bir zamanda tarayıcılardan kaldırılabilir. ( Bence FF ve IE'nin mevcut sürümlerinde, bu olayı programlı olarak tetiklemenin artık mümkün olmadığını düşünüyorum.)

Eğer fikrini alırsam bu benim yöntemim

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

gerçekten çok basit bunu deneyebilirsiniz:

$("#image id").click(function(){
    $("#input id").click();
});

Bunun yerine bir resim koyabilir ve şu şekilde yapabilirsiniz:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : IE9 ve IE10'da, javascript aracılığıyla bir dosya girişinde onclick'i tetiklerseniz, form "tehlikeli" olarak işaretlenir ve javascript ile gönderilemez, geleneksel olarak gönderilip gönderilemeyeceğinden emin olun.

Girdinin kendisi CSS görünürlüğüyle gizlenir: gizli.

Daha sonra istediğiniz öğeye sahip olabilirsiniz - çapa veya resim .., çapa / resim tıklandığında, gizli giriş alanına bir tıklamayı tetikleyin - bir dosya seçmek için iletişim kutusu görünecektir.

DÜZENLEME: Aslında Chrome ve Safari'de çalışıyor, FF4Beta'da durumun böyle olmadığını fark ettim.

Çalışma Kodu:

sadece giriş kısmını gizleyin ve böyle yapın.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

        form input[type="file"] {
          display: none;
        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

SNIPPET'İ ÇALIŞTIR veya Sadece yukarıdaki kodu kopyalayın ve çalıştırın. İstediğini alacaksın. JavaScript olmadan çok basit ve etkilidir. Zevk almak!!!

Son on yılda gizli ve görünmeyen girdilerle ilgili birçok sorun yaşadım, bazen işler düşündüğümüzden çok daha basit.

IE 5,6,7,8 ve 9 ile opaklığı desteklememek için küçük bir dilek diledim ve bu nedenle dosya girişi yükleme görüntüsünü kapsayacaktı ancak aşağıdaki css kodu sorunu çözdü.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

Aşağıdaki kırpılan kısım krom üzerinde test edilmiştir, IE 5,6,7,8,9,10 IE 5'teki tek sorun, otomatik marjı desteklememesidir.

Parçacığı çalıştırın, CSS'yi kopyalayıp yapıştırın ve HTML boyutunu istediğiniz gibi değiştirin.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

JS yazmaktan çok daha iyi bir yol, yerel kullanmaktır ve önerilenden daha hafif olur:

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

Bu şekilde labelotomatik olarak gizli olan girişe bağlanır. Etikete tıklamak, alana tıklamak gibidir.

Görüntüyü yeni seçilen görüntü ile otomatik olarak değiştirebilirsiniz.

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>




<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>