Styling tombol input type = "file"


735

Bagaimana Anda mendesain type="file"tombol input ?


Saya akan menambahkan jawaban saya sendiri untuk melakukannya dengan cara yang saya lakukan ... tapi di sini adalah contoh berdasarkan bootstrap yang mungkin membantu .. geniuscarrier.com/…
Vishnu Narang

Jawaban:


235

Input file gaya sangat sulit, karena sebagian besar browser tidak akan mengubah tampilan dari CSS atau javascript.

Bahkan ukuran input tidak akan menanggapi suka:

<input type="file" style="width:200px">

Sebagai gantinya, Anda harus menggunakan atribut ukuran:

<input type="file" size="60" />

Untuk gaya apa pun yang lebih canggih dari itu (mis. Mengubah tampilan tombol jelajah), Anda perlu melihat pendekatan yang rumit dengan cara overlay tombol bergaya dan kotak input di atas input file asli. Artikel yang telah disebutkan oleh rm di www.quirksmode.org/dom/inputfile.html adalah yang terbaik yang pernah saya lihat.

MEMPERBARUI

Meskipun sulit membuat <input>tag secara langsung, ini mudah dilakukan dengan bantuan <label>tag. Lihat jawaban di bawah ini dari @JoshCrozier: https://stackoverflow.com/a/25825731/10128619


7
Baru saja menemukan solusi jquery berdasarkan skrip ini di sini: blog.vworld.at/2008/08/21/…
mtness

1
@TLK Jawaban Ryan tidak akan berfungsi di IE ketika mencoba melakukan unggahan iframe. Ini memberi Anda kesalahan akses ditolak. Untuk unggahan normal, saya setuju itu yang paling mudah!
frostymarvelous

3
Solusi yang jauh lebih sederhana daripada quirksmode dijelaskan di sini . Taruh saja tautan itu di sini, karena jawaban ini pada dasarnya adalah jawaban hanya tautan.
Joeytje50

10
Bagi siapa pun yang tertarik pada pendekatan modern, saya sarankan melihat jawaban ini . Itu tidak memerlukan JavaScript seperti beberapa jawaban lainnya.
Josh Crozier

3
@JoshCrozier memposting solusi gila yang jauh lebih baik. Bahkan mengalahkan solusi mouseclicking :)
Lodewijk

1018

Anda tidak perlu JavaScript untuk ini! Berikut ini adalah solusi lintas-browser:

Lihat contoh ini! - Ia bekerja di Chrome / FF / IE - (IE10 / 9/8/7)

Pendekatan terbaik adalah memiliki elemen label kustom dengan foratribut yang melekat pada elemen input file tersembunyi . ( forAtribut label harus cocok dengan elemen file idagar ini berfungsi).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Sebagai alternatif, Anda juga bisa langsung membungkus elemen input file dengan label secara langsung: (contoh)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

Dalam hal penataan, sembunyikan saja 1 elemen input menggunakan pemilih atribut .

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

Maka yang perlu Anda lakukan adalah menata labelelemen kustom . (contoh) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - Perlu dicatat bahwa jika Anda menyembunyikan elemen menggunakan display: none, itu tidak akan berfungsi di IE8 dan di bawah. Perhatikan juga fakta bahwa jQuery memvalidasi tidak memvalidasi bidang tersembunyi secara default. Jika salah satu dari hal-hal tersebut menjadi masalah bagi Anda, berikut adalah dua metode berbeda untuk menyembunyikan input ( 1 , 2 ) yang berfungsi dalam keadaan ini.


43
Saya punya pertanyaan dengan yang satu ini, ketika memilih file bagaimana kita akan pergi kemudian menampilkan nama file?
Richlewis

17
Bagaimana cara menampilkan nama file yang dipilih jika display: nonediatur input[type=file]?
Sarthak Singhal

38
Solusi hebat, tetapi Anda sebenarnya perlu javascript. Jika Anda ingin menampilkan nama file, seperti yang ditanyakan orang lain, Anda perlu menambahkan rentang antara label dan input tersembunyi: <span id = "file-selected"> </span>. Kemudian perbarui rentang pada acara perubahan: $ ('# file-upload') .bind ('ubah', fungsi () {var fileName = ''; fileName = $ (ini) .val (); $ ('# file-dipilih '). html (fileName);})
Sam

9
Anda harus menggunakan position: absolute; left: -99999rembukan display: nonekarena alasan aksesibilitas. Sebagian besar waktu, pembaca layar tidak akan membaca elemen jika mereka disembunyikan menggunakan display: nonemetode ini.
Kapsul

10
Saya sangat terkejut menemukan tidak ada yang tampaknya telah mempertimbangkan aksesibilitas keyboard. labelelemen tidak dapat diakses keyboard, tidak seperti buttons dan inputs. Menambahkan tabindexbukan solusi karena labelmasih tidak akan ditindaklanjuti saat fokus dan pengguna menekan masuk. Saya memecahkan ini dengan menyembunyikan input secara visual , sehingga masih dapat difokuskan, dan kemudian menggunakan :focus-withinpada labelinduk: jsbin.com/fokexoc/2/edit?html,css .output
Oliver Joseph Ash

195

ikuti langkah-langkah ini maka Anda dapat membuat gaya khusus untuk formulir unggah file Anda:

  1. ini adalah bentuk HTML sederhana (baca komentar HTML yang saya tulis di sini di bawah ini)

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
      <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
      <!-- this is your file input tag, so i hide it!-->
      <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
      <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
      <input type="submit" value='submit' >
    </form>
  2. kemudian gunakan skrip sederhana ini untuk meneruskan acara klik ke file tag input.

    function getFile(){
         document.getElementById("upfile").click();
    }

    Sekarang Anda dapat menggunakan semua jenis gaya tanpa khawatir tentang cara mengubah gaya default.

Saya tahu ini dengan sangat baik karena saya telah mencoba mengubah gaya default selama satu setengah bulan. percayalah, ini sangat sulit karena browser yang berbeda memiliki tag input unggah yang berbeda. Jadi gunakan yang ini untuk membuat formulir unggah file kustom Anda. Berikut adalah kode lengkap UPLOAD OTOMATIS.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}
#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>


6
@ user1053263 -> Terima kasih atas rekomendasinya .. di sini saya menggunakan skrip java yang sangat sederhana, tidak perlu menggunakan kerangka kerja seperti Jquery atau PrototypeJS.
teshguru

7
Saya mengalami masalah mengirimkan formulir di IE9. Saya mendapatkan kesalahan 'Akses Ditolak' yang mencoba mengirimkan formulir melalui javascript. Jika saya mengklik tombol kirim melalui UI, itu berfungsi. Apakah ada solusi untuk ini?
Kevin

1
@kevin -> Silakan coba event.preventDefault () setelah document.myForm.submit (), saya membuat perubahan pada kode di atas.
teshguru

1
Bekerja dengan baik di Chrome, Firefox, Safari & Opera - tetapi tidak di IE9. Di IE9 saya mendapatkan kesalahan 'Access is Denied' yang sama dengan @Kevin - dan terkadang hanya gagal diam tanpa kesalahan.
daveywc

10
Di IE10 (dan mungkin IE9, dll.) Anda akan mendapatkan "Akses ditolak" (atau tidak ada respons dari jQuery) jika Anda mencoba dan secara otomatis mengirimkan formulir setelah mengklik tombol input file melalui javascript. Jadi metode ini berfungsi untuk menata tombol input file selama pengguna masih yang mengirimkan formulir. Butuh waktu beberapa saat untuk menemukan ini dan saya melihat orang lain juga memiliki masalah yang sama. Lihat ini untuk info lebih lanjut stackoverflow.com/a/4335390/21579 .
Jeff Widmer

76

Sembunyikan dengan css dan gunakan tombol kustom dengan $ (selector) .click () untuk mengaktifkan tombol browse. kemudian atur interval untuk memeriksa nilai tipe input file. Interval dapat menampilkan nilai untuk pengguna sehingga pengguna dapat melihat apa yang diunggah. Interval akan dihapus ketika formulir dikirimkan [EDIT] Maaf saya sudah sangat sibuk artinya memperbarui posting ini, berikut adalah contohnya

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

7
Perhatikan bahwa jika Anda menggunakan cara ini, ia akan menembus penjelajah internet karena ini merupakan pengecualian keamanan ..
Rejinderi

1
terima kasih tipnya. Ketika saya menggunakan IE biasanya memiliki tata letak terpisah untuk yang lainnya. BENCI IE. tetapi saya menyederhanakan semuanya di IE.
Ryan

1
Dengan FF20, $ ('# file-type'). Klik () tampaknya tidak membuka dialg "Choose file" - pada kenyataannya tidak ada yang terjadi. Ada ide?
andig

2
Coba gunakan metode pemicu di jquery. Juga. Tinggal diubah menjadi .on () di jquery baru
Ryan

1
setelah Anda mengatur interval itu pada titik apa saya dapat menghapusnya? selain itu akan terus menembak
Dave Haigh

60

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Fiddle : http://jsfiddle.net/M7BXC/

Anda juga dapat mencapai tujuan tanpa jQuery dengan JavaScript normal.

Sekarang newBtn terhubung dengan html_btn dan Anda dapat memberi gaya btn baru seperti yang Anda inginkan: D


1
Hanya ingin tahu, apakah itu berfungsi di setiap browser generasi baru seperti Firefox, IE, Opera, Safari, Chrome, dll?
Wh1T3h4Ck5

Ini solusi paling sederhana untuk saya! Paling tidak di IE 9, Chrome 23 dan FF 16 dengan jQuery 1.7.2, jadi dengan versi yang diperbarui itu akan berfungsi.
Dani bISHOP

Adakah yang tahu cara mengubah .new_Btn jika pengguna telah memilih gambar. Sekarang hanya menunjukkan kelas yang sama. Adakah yang tahu cara melacaknya? Terima kasih
Ando

2
@MehdiKaramosly berfungsi bahkan pada IE 6 - tetapi itu benar hanya hingga jQuery 1.x , jQuery 2.x + tidak mendukung IEs lama
jave.web

1
@Ando via Javascript / jQuery => nilai input file kosong atau berisi path file lokal => gunakan event pertukaran dan uji val () :) lihat jsfiddle.net/ZrBPF
jave.web

55

Semua mesin rendering secara otomatis menghasilkan tombol ketika suatu <input type="file">dibuat. Secara historis, tombol itu benar-benar tidak bergaya. Namun, Trident dan WebKit telah menambahkan kait melalui elemen semu.

Trisula

Pada IE10, tombol input file dapat ditata menggunakan ::-ms-browseelemen pseudo. Pada dasarnya, aturan CSS apa pun yang Anda terapkan ke tombol biasa dapat diterapkan ke elemen pseudo. Sebagai contoh:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Ini ditampilkan sebagai berikut di IE10 pada Windows 8:

Ini ditampilkan sebagai berikut di IE10 pada Windows 8:

WebKit

WebKit menyediakan hook untuk tombol input file dengan ::-webkit-file-upload-buttonpseudo-element. Sekali lagi, hampir semua aturan CSS dapat diterapkan, oleh karena itu contoh Trident akan bekerja di sini juga:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Ini ditampilkan sebagai berikut di Chrome 26 pada OS X:

Ini ditampilkan sebagai berikut di Chrome 26 pada OS X:


Tidak ada kemungkinan gaya khusus untuk program berbasis Gecko seperti Firefox.
Anselm

2
Dalam jawaban Anda, menggunakan css, cara menyembunyikan kata "Tidak ada file yang dipilih" di tag <input type = file>. Harap komentar saya.
user2086641

Saya tidak tahu, maaf
Anselmus


1
Jika ada yang ingin bermain dengan gaya, saya menambahkan jsfidde di sini: jsfiddle.net/peter_drinnan/r0gq6kw2
Peter Drinnan

26

Jika Anda menggunakan Bootstrap 3, ini berfungsi untuk saya:

Lihat http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Yang menghasilkan tombol input file berikut:

Tombol contoh

Serius, periksa http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/


2
Ini menjaga fungsionalitas drag & drop yang hebat :), sebagian besar jawaban tidak menerima file yang dijatuhkan.
A1rPun

25

Contoh kerja di sini dengan dukungan Drag and drop asli: https://jsfiddle.net/j40xvkb3/

Saat menata input file, Anda tidak boleh memutus interaksi asli apa pun yang disediakan input .

The display: nonePendekatan istirahat asli drag dan drop dukungan.

Untuk tidak merusak apa pun, Anda harus menggunakan opacity: 0pendekatan untuk input, dan posisikan menggunakan pola relatif / absolut dalam pembungkus.

Dengan menggunakan teknik ini, Anda dapat dengan mudah mendesain zona klik / jatuhkan untuk pengguna, dan menambahkan kelas khusus dalam javascript pada dragenteracara untuk memperbarui gaya dan memberikan umpan balik kepada pengguna untuk membuatnya melihat bahwa ia dapat menjatuhkan file.

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Ini adalah contoh yang berfungsi (dengan JS tambahan untuk menangani dragoveracara dan menjatuhkan file).

https://jsfiddle.net/j40xvkb3/

Semoga ini bisa membantu!


terima kasih untuk posting ini, bagaimana cara kerjanya jika atribut multiple = "multiple" ditambahkan, saya menyeret 2 gambar namun melihat jalur hanya untuk yang pertama
PirateApp

Anda memiliki kode yang terlewat di sini. Ada lebih banyak tentang biola. Perpustakaan apa?
ctrl-alt-delor

Hanya ada beberapa javascript pada biola dengan jQuery untuk menunjukkan file yang telah dijatuhkan. Itu saja
kevcha

Setelah menerapkan solusi ini dan mengujinya lebih lanjut, tampaknya tidak berfungsi baik di Edge.
ChrisA

1
Ah ok, saya ketinggalan bungkus dengan posisi relatif dalam jawaban Anda - Saya buruk. Jika input di bawah dimensi layar, browser mencoba menggulir ke sana dan dengan melakukan itu, memindahkan wadah gulir ke atas halaman. Berikut ini adalah demonstrasi: stackblitz.com/edit/input-file-overflow?file=style.css (hanya tidak menunjukkan persis bagaimana posisi absolut adalah penyebab perilaku)
Tom

23

Saya dapat melakukannya dengan CSS murni menggunakan kode di bawah ini. Saya telah menggunakan bootstrap dan font-mengagumkan.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>



12

Berikut adalah solusi yang tidak benar-benar menata <input type="file" />elemen tetapi menggunakan <input type="file" />elemen di atas elemen lainnya (yang dapat ditata). The <input type="file" />elemen tidak benar-benar terlihat karenanya, ilusi keseluruhan dari baik gaya control file upload.

Saya menemukan masalah ini baru-baru ini dan meskipun ada banyak jawaban di Stack Overflow, tidak ada yang benar-benar sesuai dengan tagihan. Pada akhirnya, saya akhirnya menyesuaikan ini sehingga memiliki solusi yang sederhana dan elegan.

Saya juga telah menguji ini di Firefox, IE (11, 10 & 9), Chrome dan Opera, iPad dan beberapa perangkat android.

Inilah tautan JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

Semoga ini membantu!!!


2
Solusi cerdas yang cerdik untuk shenanigans styling file jahat ini.
rmcsharry

Yang terbaik dari semuanya. Sempurna!!
Karra

11

Ini sederhana dengan jquery. Untuk memberikan contoh kode saran Ryan dengan sedikit modifikasi.

Html dasar:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Pastikan untuk mengatur gaya pada input ketika Anda siap: opacity: 0 Anda tidak dapat mengatur display: nonekarena itu harus dapat diklik. Tetapi Anda dapat menempatkannya di bawah tombol "baru" atau memasukkan di bawah sesuatu yang lain dengan indeks-z jika Anda mau.

Siapkan beberapa jquery untuk mengklik input nyata ketika Anda mengklik gambar.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Sekarang tombol Anda berfungsi. Cukup potong dan tempel nilai saat diubah.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! Anda mungkin perlu mengurai val () ke sesuatu yang lebih bermakna tetapi Anda harus siap.


1
ini akan gagal dengan FF11 - alasan: karena Anda tidak dapat secara tepat memengaruhi ukuran bidang input (hanya dengan menggunakan ukuran html) dan tombol (Anda dapat mengatur ketinggian menggunakan css), jika bidang input Anda yang terlihat lebih besar daripada FF asli yang diberikan kepada kami, Anda dibiarkan dengan area buta yang sangat besar - sudut pandang pengguna: dalam banyak kasus dia akan mengeluh bahwa unggahan tidak berfungsi, ketika diklik
Jeffz

2
Ide bagus tapi ini tidak akan berfungsi pada IE. $ ('# the_real_file_input'). klik () akan memicu dialog terbuka tetapi file tidak akan dipilih ke dalam formulir dan unggahan akan gagal.
Tomas

11

Letakkan tombol unggah file di atas tombol atau elemen Anda yang bagus dan sembunyikan.

Sangat sederhana dan akan berfungsi di browser apa pun

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

Gaya

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

8

Visibilitas: TRIK tersembunyi

Saya biasanya melakukan visibility:hiddentrik

ini adalah tombol gaya saya

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

ini adalah tipe input = tombol file. Perhatikan visibility:hiddenaturannya

<input type="file" id="upload" style="visibility:hidden;">

ini adalah bit JavaScript untuk merekatkan keduanya. Berhasil

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

1
Anda tidak dapat menggunakan metode klik () untuk mem-event untuk file tipe input. sebagian besar peramban tidak mengizinkan karena alasan keamanan
Mahi

bahkan menggunakan jquery? Apakah itu benar? bagaimana Anda melakukannya?
Gianluca Ghettini


style="visibility:hidden"terlalu panjang, cukup gunakan hidden. Juga, click()tidak berfungsi untuk browser apa pun dan tidak ada alasan keamanan yang sangat dapat diandalkan seperti sekarang dan pada perangkat apa pun itu adalah cara yang sah dan @Gianluca untuk penggunaan jQuery klasiktrigger()
Thielicious

1
Inilah solusi yang akan saya tambahkan ke ini! Ini berfungsi dan Anda dapat menampilkannya persis seperti yang Anda inginkan. Bekerja dengan Chrome, akan mencoba yang lain.
markthewizard1234

7

satu-satunya cara yang bisa saya pikirkan adalah menemukan tombol dengan javascript setelah itu diberikan dan menetapkan gaya untuk itu

Anda mungkin juga melihat luncuran ini


CSS murni, tanpa JavaScript, berfungsi di semua browser hingga ie7 - mengagumkan!
Simon Steinberger

7
<input type="file" name="media" style="display-none" onchange="document.media.submit()">

Saya biasanya menggunakan javascript sederhana untuk menyesuaikan tag input file. Bidang input tersembunyi, pada klik tombol, javascript memanggil bidang tersembunyi, solusi sederhana tanpa css atau sekelompok jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>

1
Anda tidak dapat menggunakan click()metode untuk memecat acara untuk file jenis input. sebagian besar browser tidak memungkinkan untuk alasan keamanan.
Mahi

6

Di sini kami menggunakan rentang untuk memicu input file jenis dan kami hanya menyesuaikan rentang itu , sehingga kami dapat menambahkan gaya apa pun menggunakan cara ini.

Perhatikan bahwa kami menggunakan tag input dengan visibilitas: opsi tersembunyi dan memicunya dalam rentang.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Referensi


5

Ini adalah cara yang bagus untuk melakukannya dengan mengunggah file materi / sudut. Anda dapat melakukan hal yang sama dengan tombol bootstrap.

Catatan yang saya gunakan <a>sebagai gantinya <button>ini memungkinkan acara klik untuk muncul.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

1
Ini bekerja sangat baik di sudut 2+. Tidak yakin mengapa pilihannya turun. Jika Anda menggunakan sudut, ini adalah solusi paling sederhana yang tersedia.
AndrewWhalan

4

HANYA CSS

Gunakan ini sangat sederhana dan MUDAH

Html:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

Css:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

4

Mungkin banyak awnsers. Tapi saya suka ini dalam CSS murni dengan tombol-fa:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Biola: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/


4

Jangan tertipu oleh solusi "luar biasa" CSS saja yang sebenarnya sangat spesifik browser, atau yang overlay tombol gaya di atas tombol nyata, atau yang memaksa Anda untuk menggunakan <label>bukan<button> , atau hack lainnya . JavaScript diperlukan untuk membuatnya berfungsi untuk penggunaan umum. Silakan pelajari bagaimana gmail dan DropZone melakukannya jika Anda tidak percaya kepada saya.

Cukup gaya tombol normal seperti yang Anda inginkan, lalu panggil fungsi JS sederhana untuk membuat dan menautkan elemen input tersembunyi ke tombol gaya Anda.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Perhatikan bagaimana kode di atas menghubungkan kembali setelah setiap kali pengguna memilih file. Ini penting karena "onchange" hanya dipanggil jika pengguna mengubah nama file. Tetapi Anda mungkin ingin mendapatkan file setiap kali pengguna menyediakannya.


1
Tepatnya, labelpendekatan ini berfungsi, kecuali itu tidak dapat menunjukkan nama file atau jalur yang dipilih. Jadi tentu saja, itulah satu-satunya masalah yang perlu dipecahkan JS.
Hassan Baig

4

Solusi beberapa file dengan nama file yang dikonversi

CONTOH Bootstrap

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS dengan jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS tanpa jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

3

Berikut ini solusinya, yang juga menunjukkan nama file yang dipilih: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

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

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

Bagaimana hanya menampilkan nama file, dan bukan fakepathpath?
Hassan Baig

3

Minggu ini saya juga perlu menyesuaikan tombol dan menampilkan nama file yang dipilih selain itu, jadi setelah membaca beberapa jawaban di atas (Terima kasih BTW) saya datang dengan implementasi berikut:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (Sudut)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

Pada dasarnya saya bekerja dengan ng-file-upload lib, Angular-wise Saya mengikat nama file ke $ lingkup saya dan memberikannya nilai awal dari 'Tidak ada file yang dipilih', saya juga mengikat fungsi onFileSelect () untuk lingkup saya jadi ketika file dipilih saya mendapatkan nama file menggunakan API ng-unggah dan tetapkan ke $ scope.filename.


3

Cukup mensimulasikan klik pada <input>dengan menggunakan trigger()fungsi saat mengklik pada gaya <div>. Saya membuat tombol sendiri dari a <div>dan kemudian memicu klik pada inputsaat mengklik saya <div>. Ini memungkinkan Anda membuat tombol sesuka Anda karena ini adalah <div>dan mensimulasikan klik pada file Anda <input>. Kemudian gunakan display: nonepada Anda <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

3

Cara terbaik adalah menggunakan elemen pseudo: after atau: before sebagai elemen overt input de. Kemudian gaya elemen pseudo yang Anda inginkan. Saya merekomendasikan Anda untuk melakukan gaya umum untuk semua file input sebagai berikut:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

3

Cara terbaik yang saya temukan adalah memiliki input type: filekemudian mengaturnya display: none. Berikan itu id. Buat tombol atau elemen lain yang ingin Anda buka input file.

Kemudian tambahkan pendengar acara di atasnya (tombol) yang ketika diklik mensimulasikan klik pada input file asli. Seperti mengklik tombol bernama halo tetapi membuka jendela file.

Kode contoh

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

2

css dapat melakukan banyak hal di sini ... dengan sedikit tipu daya ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: referensi :: http://site-o-matic.net/?viewpost=19

-biara


2

Saya telah menemukan metode yang sangat mudah untuk mengalihkan tombol file ke gambar. Anda cukup memberi label gambar dan meletakkannya di atas tombol file.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Saat mengklik pada gambar berlabel, Anda memilih tombol file.


2

Hanya pendekatan ini yang memberi Anda fleksibilitas penuh! ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

Ini menyembunyikan tombol file input, tetapi di bawah tenda mengkliknya dari tombol normal lain, yang Anda dapat dengan jelas gaya seperti tombol lainnya. Ini adalah satu-satunya solusi tanpa kelemahan selain dari DOM-node yang tidak berguna. Berkat display:none;, tombol input tidak menyimpan ruang yang terlihat di DOM.

(Saya tidak tahu lagi kepada siapa harus memberikan alat peraga untuk ini. Tapi saya mendapat ide dari suatu tempat di sini di Stackoverflow.)

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.