<input type=file />Öğeyi yalnızca metin alanı olmadan yalnızca "Gözat" düğmesine sahip olacak şekilde biçimlendirmenin (veya komut dosyasının) bir yolu var mı ?
Teşekkürler
Düzenleme : Sadece neden buna ihtiyacım açıklamak için. Http://www.morningz.com/?p=5 adresinden çoklu dosya yükleme kodu kullanıyorum ve hiçbir zaman değeri olmadığı için giriş metin alanına gerek yok. Komut dosyası, yeni seçilen dosyayı sayfadaki koleksiyona ekler. Mümkünse metin alanı olmadan çok daha iyi görünecektir.
Yanıtlar:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />Bu kesinlikle çalışacağım, projelerimde kullandım. Umarım bu yardımcı olur :)
Bunu başarmaya çalışan bir zamanım vardı. Bir Flash çözümü kullanmak istemedim ve baktığım jQuery kitaplıklarının hiçbiri tüm tarayıcılarda güvenilir değildi.
Tamamen CSS'de uygulanan kendi çözümümü buldum (düğmenin 'tıklatıldığını' göstermek için onclick stil değişikliği hariç).
Burada çalışan bir örneği deneyebilirsiniz: http://jsfiddle.net/VQJ9V/307/ (FF 7, IE 9, Safari 5, Opera 11 ve Chrome 14'te test edilmiştir)
Büyük bir dosya girişi (yazı tipi boyutu: 50 piksel) oluşturarak, ardından sabit boyutu ve taşması olan bir div'a sararak çalışır: gizli. Giriş daha sonra sadece bu "pencere" div. Div'e bir arka plan resmi veya rengi verilebilir, metin eklenebilir ve div arka planını göstermek için giriş şeffaf hale getirilebilir:
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)
}Bununla ilgili herhangi bir sorun olup olmadığını bana bildirin ve bunları düzeltmeye çalışacağım.
Bugün bunu işe almak için günümü boşa harcadım. Burada her bir senaryomda çalışan çözümlerin hiçbirini bulamadım.
Sonra hatırladım JQuery Dosya Yükleme için bir örnek gördüm metin kutusu olmadan . Yaptığım şey, örneklerini alıp ilgili kısma çıkarttım.
Bu çözüm en azından IE ve FF için çalışır ve tamamen şekillendirilebilir. Aşağıdaki örnekte dosya girişi, süslü "Dosya Ekle" düğmesinin altında gizlenmiştir.
<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>Girdi dosyası öğesini gizleyin ve bu girdi dosyasının tıklama olayını tetikleyecek görünür bir düğme oluşturun.
Bunu dene:
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();}
);
});Giriş dosyası etiketini css ile gizleyin, bir etiket ekleyin ve giriş düğmesine atayın. etiketi tıklanabilir olacak ve tıklandığında dosya iletişim kutusunu tetikleyecektir.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>Stili etikete düğme olarak ekleyin.
Canlı Demo
onchangeiçin bir işleyici eklemek istiyorum input.
Bu çok zor olacak. Dosya girdi türüyle ilgili sorun, genellikle tek bir DOM öğesi olarak işlenirken, genellikle iki görsel öğeden oluşmasıdır. Buna ek olarak, birkaç tarayıcının dosya girişi için kendine özgü bir görünümü ve hissi olduğunu ve kabus için hazır olduğunuzu da ekleyin. Dosya girdisinin sahip olduğu tuhaflıklar hakkında quirksmode.org adresindeki bu makaleye bakın . Seni mutlu etmeyeceğini garanti ederim (deneyimlerden bahsediyorum).
[DÜZENLE]
Aslında, girdinizi bir konteyner öğesine (div gibi) koymak ve öğeye negatif bir kenar boşluğu eklemekle uzaklaşabileceğinizi düşünüyorum. Metin kutusu bölümünü ekrandan etkin bir şekilde gizleme. Başka bir seçenek, bağladığım makaledeki tekniği kullanmak, bir düğme gibi şekillendirmeye çalışmaktır.
ÇÖZÜLDÜ tüm tarayıcılarda çalışmak için düzeltme:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>FF, Chrome ve IE'de test yaptım - iyi çalışıyor, uygulanan stiller de: D
En iyi iki çözümü uygulamaya çalıştım ve bu benim için çok büyük bir zaman kaybı oldu. Sonunda, bu .css sınıfını uygulamak sorunu çözdü ...
input[type='file'] {
color: transparent;
}Bitti! Süper temiz ve süper basit ...
Bunu yapmanın bir başka kolay yolu. Html içinde bir "girdi türü dosyası" etiketi oluşturun ve gizleyin. Sonra bir düğmeye tıklayın ve ihtiyaca göre biçimlendirin. Bundan sonra, düğme tıklatıldığında giriş etiketini programlı olarak tıklatmak için javascript / jquery kullanın.
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;
}İşte aynı için çalışan bir JS keman: - http://jsfiddle.net/32na3/
Yukarıda önerilen kodlardan bazılarını kullandım ve saatlerimi bekledikten sonra saatlerce sonra css torbası ücretsiz bir çözüme geldim.
Buradan geçirebilirsin - http://jsfiddle.net/WqGph/
ancak daha iyi bir çözüm buldu - 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/>onchangeolayın gizli inputöğe için tetiklenmemesidir .
Bir görüntüyü etiketleyebilirsiniz, böylece üzerine tıkladığınızda düğmenin tıklama olayı tetiklenir. Normal düğmeyi görünmez yapabilirsiniz:
<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>Tüm tarayıcılarda benim için çalıştı ve kullanımı çok kolay.
Click olayını aşağıdaki gibi gizli bir dosya girişine gönderebilirsiniz:
<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'); HTMLEvents değiştirmek 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();
});
});Umarım bu işe yarar :)
Bununla gerçekten hacky bir çözüm var ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />Sorun, metin alanını gizleyen width özniteliğinin tarayıcılar arasında obvous olarak, Windows XP temaları vb. Belki de üzerinde çalışabileceğin bir şey var mı? ...
Bu eski bir yazı olduğunu biliyorum ama metin dissapear yapmak için basit bir yol sadece metin rengi arka plan için ayarlamaktır.
Örneğin, metin giriş arka planınız beyazsa:
input[type="file"]{
color:#fff;
}Bu, tarayıcı nedeniyle hala siyah olan Dosya Seç metnini etkilemez.
Ben sadece 85px genişliğinde bir girdi dosyası tarz ve metin alanı hiç kayboldu
Bu HTML kodu yalnızca Dosya Yükle düğmesini gösterir
<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;
});Benim için en basit yol, arka plan rengi gibi bir yazı tipi rengi kullanmaktır. Basit, zarif değil, ama kullanışlı.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>İşte TÜM TARAYICILAR İÇİN bunu yapmanın en iyi yolu :
CSS'yi unutun!
<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>Tüm bu cevaplar sevimli, ancak CSS çalışmaz, çünkü tüm tarayıcılarda ve cihazlarda aynı değildir, yazdığım ilk cevap Safari dışında her şeyde işe yarayacaktır. Her zaman tüm tarayıcılarda çalışabilmesi için, giriş metnini her silmek istediğinizde dinamik olarak oluşturulması ve yeniden oluşturulması gerekir:
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);Tmanthey'in cevabı oldukça iyidir, ancak Firefox v20'de sınır genişliği ile oynayamazsınız. Bağlantıyı görürseniz (demo, burada gerçekten gösterilemez), sorunu daha büyük hale getirmek için Firefox için font-size = 23px, transform: translate (-300px, 0px) ölçeğini (4) kullanarak sorunu çözdüler.
Bir drag'n'drop giriş kutusu yapmak istiyorsanız .click () öğesini farklı bir div üzerinde kullanan diğer çözümler işe yaramaz.
Burada birkaç geçerli seçenek var ama benzer bir sorunu düzeltmeye çalışırken ortaya çıkardığım şeyi vereceğimi düşündüm. 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);
}Bunu ben yazdım:
<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();" />Tüm tarayıcılarda iyi çalışır, jQuery yok, CSS yok.
İşte @ ampersandre'ın tüm büyük tarayıcılarda çalışan popüler çözümünün basitleştirilmiş bir sürümü. Asp.NET işaretlemesi
<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" />JQuery Kodu
$(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');
});
});css kodu
.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;
}Standart sunucu geri gönderme için gizli bir "UploadButton" tıklama tetikleyicisi kullanır. "Dosya Yükle" metni, taşması durumunda giriş kontrolünü sarmalayıcı div içinde görünmez hale getirir, böylece "dosya girişi" kontrol div için herhangi bir stil uygulamanız gerekmez. $ ([İd $ = "FileInput"]) seçici, standart ASP.NET önekleri uygulanmış kimliklerin kesilmesine izin verir. Dosya yüklendikten sonra hdnFileName.Value arkasındaki sunucu kodundan ayarlanan FilePath metin kutusu değeri.