Ganti jenis input = file dengan gambar

99

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

css  image  file  button  input 
— Nicolas
sumber
2
Untuk semua orang yang datang ke sini, tympanus.net/codrops/2015/09/15/… mungkin juga menarik untuk dilihat. (Tidak berafiliasi dengan situs itu dengan cara, bentuk, atau bentuk apa pun.)
— CBroe
— cнŝdk

Jawaban:

279

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

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/

— hardsetting
sumber
Saya tidak yakin apakah orang masih menganggapnya sebagai 'browser utama', tetapi tampaknya ini tidak berfungsi di IE7
— Hoppe
@Chet tampaknya berfungsi pada versi terbaru Safari (7+) Versi apa yang Anda gunakan?
— hardsetting
1
@Toto Bagi saya ini berfungsi di IE11, saya telah menambahkan JSFiddle sehingga Anda dapat memeriksanya juga.
— hardsetting
@hardsetting Anda benar! Maaf (Mungkin saya dalam mode dokumen yang berbeda, ie8 atau lebih rendah)
— Toto
2
maaf tapi saya pikir kode ini harus diperbarui dengan nama file atau setidaknya pesan bahwa file telah berhasil dipilih. Pengguna tidak memiliki masukan visual tentang apa yang terjadi setelah dia memilih file. Bisakah ini dilakukan? Mungkin berubah ke gambar yang berbeda, saat file dipilih?
— JoaMika
67

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.

— meles
sumber
Terima kasih Toby, mengapa ada 'left: -700px;' ? Di firefox, bidang input file sebenarnya mengambang di sisi kiri halaman ... tidak menempel pada rentang label ... Jika saya menghapus 'left: -700px;' ini berfungsi dengan baik
— lisak
+1 Terima kasih, @Sloin kiri: -700px karena dia ingin tombol telusur berada di atas tombol sehingga kursor akan menjadi penunjuk dan bukan kursor teks.
— Caleb Doucet
15

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

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.

— resi
sumber
tidak perlu menambahkan style = "pointer-events: none" yang membuat masalah untuk membuka file jelajah.
— SantoshK
6

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

— Pekka
sumber
Terima kasih, saya telah melihat mereka di sekitar juga, tapi saya pikir keduanya membutuhkan flash player untuk bekerja, dan saya tidak ingin menambahkan layer wajib lainnya kepada pengguna. Selain itu, apakah Anda yakin mereka akan mengirim jenis data yang sama persis dengan yang dilakukan file input? Saya tidak ingin menguji ulang semua PHP saya yang dilakukan di halaman kirim. Bersulang.
— Nicolas
@niko tidak, keduanya bekerja secara berbeda, bukan elemen formulir tetapi mengirim file ke skrip penerima sendiri, jadi Anda mungkin harus mengubah alur kerja skrip Anda. Jika itu bukan pilihan, saya pikir Anda tidak dapat melakukan lebih baik daripada yang dilakukan Shaun Inman di pos yang Anda tautkan ke ...
— Pekka
Aku takut kalau begitu, itu sangat memalukan. Apakah tidak ada sesuatu tentang itu dalam implementasi CSS di masa depan? Terima kasih atas balasannya :)
— Nicolas
@niko sama-sama. Pertanyaan bagus tentang CSS - Sebenarnya saya tidak tahu, tetapi HTML 5 mungkin membawa hal-hal baru di sini. Lihat appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload misalnya.
— Pekka
Ya sepertinya menjanjikan bahkan jika demo appelsiini.net/demo/html5_upload/demo.html tidak ditampilkan dengan FF 3.6.3 saya padahal dikatakan saya perlu FF 3.6.x Lagi pula, untuk kembali ke masalah saya, saat ini HTML / CSS / Javscript (tapi tidak ada flash) hanya mengizinkan saya untuk melakukan apa? Beberapa font dan kustomisasi "warna"? Apakah saya saat itu? Bersulang.
— Nicolas
5

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>
— SystemDZ
sumber
4

sangat sederhana, Anda dapat mencoba ini:

$("#image id").click(function(){
    $("#input id").click();
});
— Zicsus
sumber
3

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.

— ParPar
sumber
2

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

— Petrunov
sumber
2

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>
— pengguna3400389
sumber
2 

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

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

— Neokorteks
sumber
Sayangnya metode ini tidak berfungsi di Safari untuk saya :(
— czLukasss
2

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

— codedudey
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.