Czy istnieje sposób na stylizację (lub skrypt) <input type=file />elementu tak, aby był widoczny tylko przycisk „Przeglądaj” bez pola tekstowego?
Dzięki
Edycja : tylko po to, aby wyjaśnić, dlaczego tego potrzebuję. Używam kodu przesyłania wielu plików z http://www.morningz.com/?p=5 i nie potrzebuje on pola tekstowego, ponieważ nigdy nie ma wartości. Skrypt po prostu dodaje nowo wybrany plik do kolekcji na stronie. Gdyby było to możliwe, wyglądałoby znacznie lepiej bez pola tekstowego.
Odpowiedzi:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />To na pewno zadziała, użyłem go w moich projektach, mam nadzieję, że to pomoże :)
Miałem cholernie dużo czasu, próbując to osiągnąć. Nie chciałem używać rozwiązania Flash, a żadna z bibliotek jQuery, które oglądałem, nie była niezawodna we wszystkich przeglądarkach.
Wymyśliłem własne rozwiązanie, które jest zaimplementowane w całości w CSS (z wyjątkiem zmiany stylu onclick, która powoduje, że przycisk wygląda na „kliknięty”).
Możesz wypróbować działający przykład tutaj: http://jsfiddle.net/VQJ9V/307/ (testowane w FF 7, IE 9, Safari 5, Opera 11 i Chrome 14)
Działa poprzez utworzenie dużego pliku wejściowego (z rozmiarem czcionki: 50px), a następnie zawijanie go w element div o stałym rozmiarze i przepełnieniu: ukryty. Dane wejściowe są wtedy widoczne tylko przez ten element div „window”. Elementowi DIV można nadać obraz lub kolor tła, można dodać tekst, a dane wejściowe można uczynić przezroczystymi, aby odsłonić tło elementu 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)
}Daj mi znać, jeśli są z tym jakieś problemy, a postaram się je naprawić.
Zmarnowałem dziś dzień, żeby to zadziałało. Nie znalazłem tutaj żadnego rozwiązania działającego w każdym z moich scenariuszy.
Wtedy przypomniałem sobie, że widziałem przykład przesyłania plików JQuery bez pola tekstowego. Więc to, co zrobiłem, to wziąłem ich przykład i zredukowałem go do odpowiedniej części.
To rozwiązanie działa przynajmniej dla IE i FF i może być w pełni stylizowane. W poniższym przykładzie plik wejściowy jest ukryty pod fantazyjnym przyciskiem „Dodaj pliki”.
<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>Ukryj element pliku wejściowego i utwórz widoczny przycisk, który wyzwoli zdarzenie kliknięcia tego pliku wejściowego.
Spróbuj tego:
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();}
);
});Ukryj znacznik pliku wejściowego za pomocą css, dodaj etykietę i przypisz ją do przycisku wejściowego. będzie można kliknąć, a po kliknięciu otworzy okno dialogowe pliku.
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>Dodaj styl do etykiety jako przycisk.
Live Demo
onchangeprocedurę obsługi do inputpliku, aby umożliwić kodowi JS pobranie informacji o przesłanym pliku.
To będzie bardzo trudne. Problem z typem wejściowym pliku polega na tym, że zwykle składa się on z dwóch elementów wizualnych, a jednocześnie jest traktowany jako pojedynczy element DOM. Dodaj do tego to, że kilka przeglądarek ma własny, odrębny wygląd i sposób działania podczas wprowadzania pliku, a jesteś gotowy na koszmar. Zobacz ten artykuł na quirksmode.org o dziwactwach, jakie ma wejście do pliku. Gwarantuję, że nie sprawi ci to radości (mówię z doświadczenia).
[EDYTOWAĆ]
Właściwie myślę, że możesz uciec, umieszczając dane wejściowe w elemencie kontenera (takim jak div) i dodając ujemny margines do elementu. Skutecznie ukrywa część pola tekstowego poza ekranem. Inną opcją byłoby użycie techniki z artykułu, do którego utworzyłem łącze, aby spróbować stylizować go na przycisk.
Poprawka do pracy we wszystkich przeglądarkach ROZWIĄZANE:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>Testowałem w FF, Chrome i IE - działa dobrze, stosowane style też: D
Próbowałem wdrożyć dwa najlepsze rozwiązania i okazało się to dla mnie OGROMNĄ stratą czasu. W końcu zastosowanie tej klasy .css rozwiązało problem ...
input[type='file'] {
color: transparent;
}Gotowe! super czysty i super prosty ...
Kolejny łatwy sposób na zrobienie tego. Utwórz tag „plik typu wejściowego” w html i ukryj go. Następnie kliknij przycisk i sformatuj go zgodnie z potrzebami. Następnie użyj javascript / jquery, aby programowo kliknąć znacznik wejściowy po kliknięciu przycisku.
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;
}Oto działające skrzypce JS do tego samego: - http://jsfiddle.net/32na3/
Użyłem części kodu zalecanego powyżej i po wielu godzinach marnowania czasu w końcu doszedłem do rozwiązania bez torby CSS.
Możesz go uruchomić tutaj - http://jsfiddle.net/WqGph/
ale potem znalazłem lepsze rozwiązanie - 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/>onchangezdarzenie nie jest wyzwalane dla ukrytego inputelementu.
Możesz oznaczyć obraz tak, aby po jego kliknięciu wywoływane było zdarzenie kliknięcia przycisku. Możesz po prostu uczynić zwykły przycisk niewidocznym:
<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>Działa dla mnie we wszystkich przeglądarkach i jest bardzo łatwy w użyciu.
Możesz wywołać zdarzenie kliknięcia na ukrytym pliku wejściowym w następujący sposób:
<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'); zmień HTMLEvents na 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();
});
});Mam nadzieję, że to zadziała :)
Mam naprawdę zepsute rozwiązanie z tym ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />Problem polega na tym, że atrybut szerokości, który ukrywa pole tekstowe, oczywiście różni się w zależności od przeglądarki, różni się w zależności od motywów systemu Windows XP i tak dalej. Może to jednak coś, z czym możesz pracować? ...
Wiem, że to stary post, ale prostym sposobem na zniknięcie tekstu jest ustawienie koloru tekstu na kolor tła.
np. jeśli tło wprowadzania tekstu jest białe, to:
input[type="file"]{
color:#fff;
}Nie wpłynie to na tekst Wybierz plik, który z powodu przeglądarki nadal będzie czarny.
moim rozwiązaniem jest po prostu ustawienie go w elemencie div, tak jak powiedział "druveen", jednak dodam własny styl przycisku do elementu div (nadaj mu wygląd przycisku z: hover) i ustawiam styl "krycie: 0;" do wejścia. Dla mnie działa jak urok, mam nadzieję, że zrobi to samo dla ciebie.
Po prostu nadałem plikowi wejściowemu styl o szerokości: 85 pikseli, a pole tekstowe w ogóle zniknęło
Ten kod HTML pokazuje tylko przycisk Prześlij plik
<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;
});Dla mnie najprostszym sposobem jest użycie koloru czcionki, takiego jak kolor tła. Proste, nie eleganckie, ale przydatne.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>Oto najlepszy sposób, aby to zrobić DLA WSZYSTKICH PRZEGLĄDAREK:
Zapomnij o 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>Wszystkie te odpowiedzi są urocze, ale CSS nie będzie działać, ponieważ nie jest taki sam we wszystkich przeglądarkach i urządzeniach, pierwsza odpowiedź, którą napisałem, będzie działać we wszystkim oprócz Safari. Aby działał we wszystkich przeglądarkach przez cały czas, musi być tworzony dynamicznie i odtwarzany za każdym razem, gdy chcesz wyczyścić tekst wejściowy:
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);Odpowiedź tmanthey jest całkiem dobra, z wyjątkiem tego, że nie można grać z border-width w Firefoksie v20. Jeśli widzisz link (demo, tak naprawdę nie można go tu pokazać), rozwiązali problem, używając font-size = 23px, transform: translate (-300px, 0px) scale (4) dla Firefoksa, aby powiększyć przycisk.
Inne rozwiązania wykorzystujące .click () na innym elemencie div są bezużyteczne, jeśli chcesz, aby było to pole wprowadzania danych metodą drag'n'drop.
Jest tutaj kilka ważnych opcji, ale pomyślałem, że podam to, co wymyśliłem, próbując rozwiązać podobny problem. 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);
}Ja to napisałem:
<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();" />Działa dobrze we wszystkich przeglądarkach, bez jQuery, bez CSS.
Oto uproszczona wersja popularnego rozwiązania @ ampersandre, które działa we wszystkich głównych przeglądarkach. Znaczniki 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" />Kod 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');
});
});kod 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;
}Używa ukrytego wyzwalacza kliknięcia „UploadButton” do ogłaszania zwrotnego serwera ze standardem. Tekst z tekstem „Prześlij plik” wypycha element sterujący wejścia poza widok w opakowującym elemencie div, gdy przepełnia, więc nie ma potrzeby stosowania żadnych stylów dla elementu sterującego „wejście pliku”. Selektor $ ([id $ = "FileInput"]) umożliwia sekcję identyfikatorów z zastosowanymi standardowymi prefiksami ASP.NET. Wartość pola tekstowego FilePath jest ustawiana na podstawie kodu serwera z hdnFileName.Value po przesłaniu pliku.