Seperti input type=filekebanyakan orang, saya ingin menyesuaikan yang jelek , dan saya tahu itu tidak dapat dilakukan tanpa beberapa peretasan dan / atau javascript. Tapi, masalahnya adalah dalam kasus saya tombol unggah file hanya untuk mengunggah gambar ( jpeg | jpg | png | gif ), jadi saya ingin tahu apakah saya bisa menggunakan gambar " clickable" yang akan bertindak persis sebagai file jenis masukan ( tunjukkan kotak dialog, dan $ _FILE yang sama pada halaman yang dikirimkan).
Saya menemukan beberapa solusi di sini , dan yang ini juga menarik (tetapi tidak berfungsi di Chrome = /).

Apa yang kalian lakukan saat ingin menambahkan gaya ke tombol file? Jika Anda memiliki sudut pandang tentang itu, tekan saja tombol jawab;)

Ini bekerja dengan sangat baik untuk saya:

.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>

Pada dasarnya atribut for pada label membuatnya sehingga mengklik label sama dengan mengklik input yang ditentukan .

Selain itu, properti display yang disetel ke none membuatnya sehingga input file tidak dirender sama sekali, menyembunyikannya dengan baik dan bersih.

Diuji di Chrome tetapi menurut web harus bekerja di semua browser utama. :)

EDIT: Menambahkan JSFiddle di sini: https://jsfiddle.net/c5s42vdz/

Sebenarnya itu bisa dilakukan dalam css murni dan itu cukup mudah ...

Kode HTML

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

Gaya CSS

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;
}

Idenya adalah untuk menempatkan masukan secara mutlak di dalam label Anda. setel ukuran font masukan menjadi sesuatu yang besar, yang akan meningkatkan ukuran tombol "telusuri". Kemudian diperlukan beberapa percobaan dan kesalahan menggunakan properti kiri / atas negatif untuk menempatkan tombol jelajah masukan di belakang label Anda.

Saat memosisikan tombol, setel alfa ke 1. Setelah selesai, setel kembali ke 0 (agar Anda dapat melihat apa yang Anda lakukan!)

Pastikan Anda menguji di seluruh browser karena semuanya akan membuat tombol masukan berukuran sedikit berbeda.

Solusi hebat dengan @hardsetting, Tapi saya membuat beberapa perbaikan untuk membuatnya bekerja dengan Safari (5.1.7) di windows

.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>

Saya telah menggunakan visibility: hidden, width:0bukan display: noneuntuk masalah safari dan ditambahkan pointer-events: nonedalam imgtag untuk membuatnya bekerja jika jenis file input tag dalam tag FORM.

Sepertinya berfungsi untuk saya di semua browser utama.

Semoga bisa membantu seseorang.

Saya akan menggunakan SWFUpload atau Uploadify . Mereka membutuhkan Flash tetapi melakukan semua yang Anda inginkan tanpa masalah.

Setiap <input type="file">solusi berbasis yang mencoba untuk memicu "open file" dialog dengan cara lain daripada mengklik pada kontrol yang sebenarnya bisa dihapus dari browser untuk alasan keamanan setiap saat. (Saya pikir dalam versi FF dan IE saat ini, tidak mungkin lagi untuk memicu acara itu secara terprogram.)

Ini adalah metode saya jika saya mengerti maksud Anda

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>

sangat sederhana, Anda dapat mencoba ini:

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

Anda dapat meletakkan gambar sebagai gantinya, dan melakukannya seperti ini:

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');
});

PERHATIAN : Di IE9 dan IE10, jika Anda memicu onclick dalam input file melalui javascript, formulir akan ditandai sebagai 'berbahaya' dan tidak dapat disubmit dengan javascript, tidak yakin apakah dapat dikirimkan secara tradisional.

Masukan itu sendiri tersembunyi dengan visibilitas CSS: tersembunyi.

Kemudian Anda dapat memiliki elemen apa pun yang Anda inginkan - jangkar atau gambar .., ketika jangkar / gambar diklik, memicu klik pada bidang masukan tersembunyi - kotak dialog untuk memilih file akan muncul.

EDIT: Sebenarnya ini berfungsi di Chrome dan Safari, saya baru menyadari bahwa tidak demikian halnya di FF4Beta

Kode Kerja:

sembunyikan saja bagian input dan lakukan seperti ini.

<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>

JALANKAN SNIPPET atau Cukup salin kode di atas dan jalankan. Anda akan mendapatkan apa yang Anda inginkan. Sangat sederhana dan efektif tanpa javascript. Nikmati!!!

Saya memiliki banyak masalah dengan masukan yang tersembunyi dan tidak terlihat selama dekade terakhir, terkadang semuanya jauh lebih sederhana dari yang kita kira.

Saya memiliki sedikit keinginan dengan IE 5,6,7,8 dan 9 karena tidak mendukung opacity dan dengan demikian input file akan menutupi gambar unggahan namun kode css berikut telah menyelesaikan masalah.

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

Potongan berikut diuji pada chrome, IE 5,6,7,8,9,10 satu-satunya masalah di IE 5 adalah bahwa ia tidak mendukung margin otomatis.

Jalankan cuplikannya, cukup salin dan tempel CSS dan ubah ukuran HTML sesuka Anda.

.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>