tipe input = tombol hanya tampilkan file

154

Apakah ada cara untuk menata <input type=file />elemen (atau skrip) agar hanya ada tombol "Browse" tanpa bidang teks?

Terima kasih

Sunting : Hanya untuk menjelaskan mengapa saya membutuhkan ini. Saya menggunakan kode unggah multi file dari http://www.morningz.com/?p=5 dan tidak perlu bidang teks masukan karena tidak pernah memiliki nilai. Script baru saja menambahkan file yang dipilih ke koleksi di halaman. Akan terlihat jauh lebih baik tanpa bidang teks, jika memungkinkan.

javascript html css Andrija
sumber

169

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Ini pasti akan berhasil saya telah menggunakannya dalam proyek saya. Saya harap ini membantu :)

shiba
sumber

1

Jawaban ini sangat sederhana dan elegan dan telah bekerja untuk semua browser.

Mike.C.Ford

Sejauh ini, ini adalah solusi terbaik yang saya temukan. Ini menghilangkan beberapa perilaku gaya input file nyentrik nyata dengan browser seluler yang berbeda. Sekarang kontrol input file saya tidak menonjol seperti jempol yang sakit dengan sisa tata letak saya. Terima kasih banyak, berharap saya bisa memilih lebih dari 1.

Highdown

... dan tambahkan onchange = "this.form.submit ();" untuk memasukkan elemen File untuk mulai mengunggah setelah pemilihan file. Jangan lupa untuk membungkus semua elemen dengan tag Form.

Tomas

1

Ini tidak akan berfungsi di IE8 dan di bawah ini ketika mengirimkan formulir Anda akan mendapatkan kesalahan Akses Ditolak (Anda tidak dapat memicu input file dengan js di IE8 dan di bawah untuk "alasan keamanan")

unenthusiasticuser

3

@unenthusiasticuser benar dan tidak akan berfungsi di iPad karena alasan keamanan yang sama. :)

Mahi

80

Saya sedang bersenang-senang mencoba untuk mencapai ini. Saya tidak ingin menggunakan solusi Flash, dan tidak ada perpustakaan jQuery yang saya lihat dapat diandalkan di semua browser.

Saya datang dengan solusi saya sendiri, yang diimplementasikan sepenuhnya dalam CSS (kecuali untuk perubahan gaya onclick untuk membuat tombol muncul 'diklik').

Anda dapat mencoba contoh yang berfungsi di sini: http://jsfiddle.net/VQJ9V/307/ (Diuji dalam FF 7, IE 9, Safari 5, Opera 11 dan Chrome 14)

Ini bekerja dengan membuat input file besar (dengan ukuran font: 50px), kemudian membungkusnya dalam div yang memiliki ukuran tetap dan melimpah: disembunyikan. Input kemudian hanya terlihat melalui "jendela" div ini. Div dapat diberi gambar atau warna latar belakang, teks dapat ditambahkan, dan input dapat dibuat transparan untuk mengungkapkan latar belakang div:

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

Beri tahu saya jika ada masalah dan saya akan coba memperbaikinya.

ampersandre
sumber

4

ini adalah solusi terbaik yang saya temui yang bekerja dengan semua browser

Fatal

2

Kamulah orangnya. Saya telah berjuang dengan masalah ini pada FF dan solusi Anda adalah satu-satunya yang benar-benar berfungsi, khususnya dengan tombol yang lebih besar dengan meningkatkan area aktifnya menggunakan "ukuran font". Terima kasih! :)

jpincheira

2

Sangat bagus tanpa menggunakan skrip apa pun

Bujji

1

Twitter melakukannya tetapi agak berbelit-belit dibandingkan dengan yang ini. Bekerja dengan baik untukku!

volume satu

solusi bagus! Hanya satu pertanyaan: mengapa Anda tidak memberikan .fileInput lebar 100% dan mengatur lebar .inputWrapper ke otomatis?

luin

52

Saya menyia-nyiakan hari saya hari ini untuk bekerja. Saya tidak menemukan satu pun solusi di sini yang bekerja dengan masing-masing skenario saya.

Kemudian saya ingat saya melihat contoh untuk Upload File JQuery tanpa kotak teks. Jadi yang saya lakukan adalah saya mengambil contoh mereka dan melepasnya ke bagian yang relevan.

Solusi ini setidaknya berfungsi untuk IE dan FF dan dapat ditata sepenuhnya. Dalam contoh di bawah ini, input file disembunyikan di bawah tombol "Tambah File".

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>

tantyy
sumber

4

Bagian yang penting adalah bahwa overflow kontainer diatur ke tersembunyi.

Maxim V. Pavlov

1

Ini benar-benar berfungsi untuk saya di IE & Chrome setidaknya. Terima kasih :)

Kevin Dark

1

lebar-perbatasan: 0 0 100px 200px; bekerja untuk saya juga di IE dan Chrome. Terima kasih.

Paul

2

Jika saya mengajukan pertanyaan awal, saya memiliki kesopanan untuk menandai ini sebagai jawabannya. Terima kasih.

Mark Rendle

Jawaban yang lebih baik ada di bawah ini. Gunakan label, sembunyikan input. Bagus sekali!

GM

25

Sembunyikan elemen file input dan buat tombol yang terlihat yang akan memicu peristiwa klik pada file input tersebut.

Coba ini:

CSS

#file { width:0; height:0; }

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT (jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

jojo
sumber

Saya telah membuat plugin jQuery yang berfungsi untuk Anda: github.com/mbitto/jquery.buttonFile

Manuel

Ini tidak berfungsi di versi IE yang lebih baru. Klik tidak langsung menyebabkan IE membalik dan menolak akses. Itu menyebalkan.

Andrew

20

Sembunyikan tag file input dengan css, tambahkan label dan tetapkan ke tombol input. label akan dapat diklik dan ketika diklik, itu akan menjalankan dialog file.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Tambahkan gaya ke label sebagai tombol.
Demo Langsung

Suresh Pattu
sumber

1

Bekerja dengan baik di Safari hari ini 4 Februari 2015

gman

Ini mungkin jawaban paling sederhana dan terbaik. Saya juga akan menambahkan onchangepenangan ke inputuntuk memungkinkan beberapa kode JS untuk mengambil info file yang diunggah.

David R Tribble

16

Itu akan sangat sulit. Masalah dengan tipe input file adalah bahwa biasanya terdiri dari dua elemen visual, sementara diperlakukan sebagai elemen DOM tunggal. Tambahkan bahwa beberapa browser memiliki tampilan dan rasa berbeda untuk input file, dan Anda siap untuk mimpi buruk. Lihat artikel ini di quirksmode.org tentang kebiasaan yang dimiliki input file. Saya jamin itu tidak akan membuat Anda bahagia (saya berbicara dari pengalaman).

[EDIT]

Sebenarnya, saya pikir Anda mungkin lolos dengan memasukkan input Anda ke elemen kontainer (seperti div), dan menambahkan margin negatif ke elemen. Secara efektif menyembunyikan bagian kotak teks dari layar. Pilihan lain adalah dengan menggunakan teknik dalam artikel yang saya tautkan, untuk mencoba bergaya seperti tombol.

Erik van Brakel
sumber

4

Artikel tentang quirksmode itu bagus. Input file styling masih sulit. : P

MitMaro

Saya tidak berpikir margin netagive yang terkandung akan bekerja dengan baik setelah Anda mempertimbangkan gaya browser yang berbeda dan ukuran font minimum yang berbeda dari pengguna ke pengguna.

joebert

1

joebert: Saya setuju, saya pikir pilihan terbaik masih teknik yang ditampilkan dalam artikel quirksmode, betapa menyakitkannya meretas ...

Erik van Brakel

14

Perbaiki untuk bekerja di semua browser RESOLVED:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

Saya telah menguji FF, Chrome & IE - bekerja dengan baik, menerapkan gaya juga: D

Javier Reyes
sumber

6

Saya cukup yakin itu tidak berfungsi pada sejumlah browser (termasuk FF dan IE, ketika saya terakhir kali diuji) - satu-satunya browser yang saya ingat berfungsi adalah Chrome.

Herman Schaaf

Itu hanya bekerja dengan jQuery, tetapi itu bukan solusi mandiri.

Solenoid

3

Ini tampaknya berfungsi (ini memunculkan menu pemilih file), tetapi ketika formulir dikirimkan, file tidak dikirim dalam FireFox dan IE, untuk alasan keamanan.

ampersandre

13

Saya mencoba menerapkan dua solusi teratas, dan akhirnya menjadi buang-buang waktu SANGAT BESAR bagi saya. Pada akhirnya, menerapkan kelas .css ini memecahkan masalah ...

input[type='file'] {
  color: transparent;
}

Selesai! super bersih dan super sederhana ...

nikotromus
sumber

1

Ini metode yang bagus!

Kaow

9

Cara mudah lain untuk melakukan ini. Buat tag "input type file" dalam html dan sembunyikan. Kemudian klik tombol dan format sesuai kebutuhan. Setelah ini gunakan javascript / jquery untuk secara terprogram mengklik tag input ketika tombol diklik.

HTML: -

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

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Berikut ini adalah biola JS yang berfungsi untuk hal yang sama: - http://jsfiddle.net/32na3/

divyenduz
sumber

2

Ini adalah solusi yang rapi tetapi saya tidak bisa membuatnya berfungsi di Chrome. Rupanya yang lain juga tidak bisa. Opera dan Chrome tidak mengizinkan klik pada file tipe input untuk alasan keamanan. Di sini Anda dapat menemukan lebih banyak tentang ini dan solusi yang bekerja untuk saya: stackoverflow.com/a/3030174/2650732

wojjas

Kembali ketika saya menulis jawaban ini, itu berhasil di chrome. Terima kasih telah memberi tahu saya, akan memperbarui jawaban saya sesuai

divyenduz

7

Saya menggunakan beberapa kode yang direkomendasikan di atas dan setelah berjam-jam menunggu waktu saya, saya akhirnya datang ke solusi gratis tas css.

Anda dapat menjalankannya di sini - http://jsfiddle.net/WqGph/

tetapi kemudian menemukan solusi yang lebih baik - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

GoreOle
sumber

Masalahnya adalah bahwa onchangeperistiwa tersebut tidak dipicu untuk inputelemen tersembunyi .

David R Tribble

6

Ini obat baik saya:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

Setidaknya itu berfungsi di Safari.

Polos dan sederhana.

Zooza S
sumber

4

Anda dapat memberi label pada suatu gambar sehingga ketika Anda mengkliknya, klik acara akan dipicu. Anda cukup membuat tombol normal tidak terlihat:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Ini bekerja untuk saya di semua browser, dan sangat mudah digunakan.

D-Inventor
sumber

4

Anda dapat mengirim acara klik pada input file tersembunyi seperti 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;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>

Luaskan cuplikan

jiang min
sumber

var ev = document.createEvent('HTMLEvents'); ubah HTMLEvents ke MouseEventsvar ev = document.createEvent('MouseEvents');

jiang min

Terima kasih banyak! Saya mengonversi pos Anda ke cuplikan kode yang dapat dijalankan dan mengubah HtmlEvents menjadi MouseEvents

Fabian Schmengler

4

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

JQUERY

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

Semoga ini berhasil :)

Anoop saju
sumber

4

Anda dapat memberikan opacity font elemen input dari 0. Ini akan menyembunyikan bidang teks tanpa menyembunyikan tombol 'Pilih File'.

Tidak diperlukan javascript, hapus peramban silang sejauh IE 9

Misalnya,

input {color: rgba(0, 0, 0, 0);}

nicholmen
sumber

3

Ive solusi yang sangat aneh dengan ini ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

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

Masalahnya adalah atribut width yang menyembunyikan bidang teks akan bervariasi antar browser, bervariasi antara tema Windows XP dan sebagainya. Mungkin ini sesuatu yang bisa Anda kerjakan? ...

sumber

Bahkan yang ini tidak akan berfungsi pada IE6, browser tidak mengerti pemilih atribut.

Adrian Godong

3

Saya tahu ini adalah posting lama tetapi cara sederhana untuk membuat teks menghilang hanya dengan mengatur warna teks ke latar belakang Anda.

mis. jika latar belakang input teks Anda putih, maka:

input[type="file"]{
color:#fff;
}

Ini tidak akan mempengaruhi teks Pilih File yang masih hitam karena browser.

Keleko
sumber

1

Memetikan jika pengguna mengklik bagian itu, maka popup unggahan akan dibuka.

Praveen

3

Ini bekerja untuk saya:

input[type="file"]  {
    color: white!important;
}

pemula
sumber

2

solusi saya adalah hanya mengaturnya dalam div seperti "druveen" kata, namun saya iklankan gaya tombol saya sendiri ke div (membuatnya terlihat seperti tombol dengan: hover) dan saya hanya mengatur gaya "opacity: 0;" ke input. Ini sangat mempesona bagi saya, semoga berhasil juga untuk Anda.

ThomasG
sumber

2

Saya baru menata file input dengan lebar: 85px, dan bidang teks menghilang sama sekali

sumber

Jadi, apakah bidang teks hilang atau tidak? "Sama sekali" mighr menyiratkan negasi di sana, tetapi tata bahasa Anda cacat (dan dengan demikian ambigu).

Kirk Woll

2

Kode HTML ini hanya menampilkan tombol Unggah File

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

Anil Shetty
sumber

1

Harap pertimbangkan untuk menambahkan beberapa informasi kontekstual ke jawaban Anda yang menjelaskan apa yang dilakukan cuplikan kode Anda.

Clijsters

1

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

Somwang Souksavatd
sumber

1

Bagi saya, cara paling sederhana adalah menggunakan warna font seperti warna latar belakang. Sederhana, tidak elegan, tetapi bermanfaat.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

sumber

1

Jadi, inilah cara terbaik untuk melakukan ini UNTUK SEMUA BROWSER:

Lupakan CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>

pengguna1965301
sumber

INI TIDAK AKAN BEKERJA DI SAFARI ... karena tidak mengizinkan .trigger ('klik') untuk alasan keamanan:? untuk membuatnya bekerja di safari secara dinamis, buat tombol file dan tambahkan kembali ketika dimuat lagi

user1965301

1

Semua jawaban ini lucu, tetapi CSS tidak akan berfungsi karena tidak sama di semua browser dan perangkat, jawaban pertama yang saya tulis akan bekerja di semua hal selain Safari. Agar berfungsi di semua browser setiap saat, itu harus dibuat secara dinamis dan diciptakan kembali setiap kali Anda ingin menghapus teks input:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

pengguna1965301
sumber

1

Jawaban tmanthey cukup bagus, kecuali Anda tidak bisa bermain dengan lebar-batas di Firefox v20. Jika Anda melihat tautan (demo, tidak dapat benar-benar ditampilkan di sini) mereka memecahkan masalah menggunakan font-size = 23px, transform: translate (-300px, 0px) scale (4) untuk Firefox untuk mendapatkan tombol yang lebih besar.

Solusi lain menggunakan .click () pada div yang berbeda tidak berguna jika Anda ingin membuatnya menjadi kotak input drag'n'drop.

Balint Karakai
sumber

1

Ada beberapa opsi yang valid di sini tetapi saya pikir saya akan memberikan apa yang saya dapatkan ketika mencoba untuk memperbaiki masalah yang sama. http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}

Matthew Pautzke
sumber

1

Diselesaikan dengan kode berikut:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

druveen
sumber

1

Saya menulis ini:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Luaskan cuplikan

Bekerja dengan baik di semua browser, tanpa jQuery, tanpa CSS.

MadMaxIII
sumber

1

Ini adalah versi sederhana dari solusi populer @ ampersandre yang berfungsi di semua browser utama. Markup ASP.NET

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

Kode JQuery

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

kode css

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Menggunakan pemicu klik "UploadButton" tersembunyi untuk postback server dengan standar. Teks dengan "Unggah File" mendorong kontrol input keluar dari tampilan di pembungkus div ketika meluap sehingga tidak perlu menerapkan gaya apa pun untuk div kontrol "input file". Pemilih $ ([id $ = "FileInput"]) memungkinkan bagian id dengan awalan standar ASP.NET diterapkan. Nilai kotak teks FilePath diatur dari kode server di belakang dari hdnFileName.Value setelah file diunggah.

Dan Randolph
sumber

tipe input = tombol hanya tampilkan file

Jawaban: