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.
Jawaban:
<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 :)
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.
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>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();}
);
});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
onchangepenangan ke inputuntuk memungkinkan beberapa kode JS untuk mengambil info file yang diunggah.
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.
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
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 ...
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/
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/>onchangeperistiwa tersebut tidak dipicu untuk inputelemen tersembunyi .
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.
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>var ev = document.createEvent('HTMLEvents'); ubah HTMLEvents ke MouseEventsvar ev = document.createEvent('MouseEvents');
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 :)
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? ...
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.
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.
Saya baru menata file input dengan lebar: 85px, dan bidang teks menghilang sama sekali
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><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;
});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>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>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);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.
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);
}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();" />Bekerja dengan baik di semua browser, tanpa jQuery, tanpa CSS.
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.