Styling an input type="file" button
Jak stylować przycisk input type="file".
30 answers
Style wprowadzania plików jest notorycznie trudne, ponieważ większość przeglądarek nie zmieni wyglądu ani css, ani javascript.
Nawet wielkość wejścia nie odpowie na takie:
<input type="file" style="width:200px">
Zamiast tego musisz użyć atrybutu size:
<input type="file" size="60" />
W przypadku bardziej wyrafinowanych stylów (np. zmiana wyglądu przycisku Przeglądaj) musisz przyjrzeć się podstępnemu podejściu nakładania stylizowanego przycisku i pola wprowadzania na górze pliku natywnego wejście. Artykuł wspomniany już przez rm w www.quirksmode.org/dom/inputfile.html jest najlepszy, jaki widziałem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-06 04:51:10
Nie potrzebujesz do tego JavaScript! Oto rozwiązanie między przeglądarkami:
Zobacz ten przykład! - Działa w Chrome / FF / IE - (IE10/9/8/7)
Najlepszym rozwiązaniem byłoby posiadanie niestandardowego elementu etykiety z atrybutem for dołączonym do ukrytego elementu wejściowego pliku. (Atrybut etykiety for musi pasować do elementu pliku id, aby to zadziałało).
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
Jako alternatywę, możesz również po prostu owinąć element wejściowy pliku z etykietą bezpośrednio: (przykład)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
Jeśli chodzi o stylizację, po prostu ukryj1 element wejściowy za pomocą selektora atrybutów .
input[type="file"] {
display: none;
}
Następnie wszystko, co musisz zrobić, to stylizować niestandardowy element label. (przykład).
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - Warto zauważyć, że jeśli ukryjesz element za pomocą display: none, nie będzie on działał w IE8 i poniżej. Należy również pamiętać o tym, że jQuery validate nie domyślnie waliduje ukryte pola . Jeśli któraś z tych rzeczy jest dla Ciebie problemem, oto dwie różne metody ukrycia danych wejściowych (1, 2) to działa w takich okolicznościach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:38
Wykonaj następujące kroki, a następnie możesz utworzyć niestandardowe style dla formularza przesyłania plików:
1.) jest to prosty formularz html (proszę przeczytać komentarze html, które napisałem poniżej)
<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.) następnie użyj tego prostego skryptu, aby przekazać Zdarzenie click do znacznika file input.
function getFile(){
document.getElementById("upfile").click();
}
Teraz możesz używać dowolnego typu stylizacji bez martwienia się, jak zmienić style domyślne. wiem to bardzo dobrze, ponieważ próbowałem zmienić domyślne style przez półtora miesiąca. uwierz mi. jest to bardzo trudne, ponieważ różne przeglądarki mają inny znacznik wejściowy przesyłania. Użyj tego, aby utworzyć niestandardowe formularze przesyłania plików.Oto pełny automatyczny kod wysyłania.
<html>
<head>
<style>
#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;
}
</style>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<center>
<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>
</center>
</body>
</html>
Miłego dnia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 23:10:16
Ukryj Go za pomocą css i Użyj niestandardowego przycisku z $(selektor).Kliknij (), aby aktywować przycisk Przeglądaj. następnie Ustaw interwał, aby sprawdzić wartość typu wejściowego pliku. interwał może wyświetlać wartość dla użytkownika, aby użytkownik mógł zobaczyć, co zostanie przesłane. przedział będzie jasny, gdy formularz zostanie złożony [edytuj / edytuj kod] Przepraszam, że byłem bardzo zajęty, miałem zamiar zaktualizować ten post, oto przykład
<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;
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-26 12:55:38
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/
Możesz osiągnąć swoje cele również bez jQuery z normalnym JavaScript.
Teraz newBtn jest linkiem z html_btn i możesz stylować swój nowy btn jak chcesz: d
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-20 23:33:40
Wszystkie silniki renderujące automatycznie generują przycisk po utworzeniu <input type="file">. Historycznie ten przycisk był całkowicie nie do stylizacji. Jednak Trident i WebKit dodali Hooki za pomocą pseudo-elementów.
Trident
Od IE10 przycisk wprowadzania pliku może być stylizowany za pomocą pseudo-elementu ::-ms-browse. Zasadniczo, wszelkie reguły CSS, które zastosujesz do zwykłego przycisku, mogą być zastosowane do pseudo-elementu. Na przykład:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}<input type="file">Wyświetla się następująco W IE10 w systemie Windows 8:
WebKit
WebKit udostępnia hook dla swojego przycisku wprowadzania pliku z pseudo-elementem ::-webkit-file-upload-button. Ponownie, można zastosować prawie każdą regułę CSS, dlatego przykład Trident będzie działał również tutaj:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}<input type="file">W Chrome 26 na OS X wyświetla się następująco:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-04 18:03:47
<label>
<input type="file" />
</label>
Możesz zawinąć swój input type = "file" wewnątrz etykiety dla wejścia. Styl etykiety jak chcesz i ukryj wejście za pomocą display: none;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-23 01:33:57
Jeśli używasz Bootstrap 3, to działa dla mnie:
Zobacz 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>, który tworzy następujący przycisk wprowadzania pliku:
Poważnie, sprawdź http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-18 17:35:54
Jestem w stanie to zrobić za pomocą czystego CSS za pomocą poniższego kodu. Użyłem bootstrap i font-awesome.
<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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-30 08:14:15
To jest proste z jquery. Aby podać przykład kodu sugestii Ryana z niewielką modyfikacją.
Podstawowy html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
Pamiętaj, aby ustawić stylizację na wejściu, gdy będziesz gotowy: opacity: 0
Nie możesz ustawić display: none, ponieważ musi być klikalny. Ale możesz umieścić go pod przyciskiem "nowy" lub włożyć pod coś innego za pomocą z-index, jeśli wolisz.
Ustaw niektóre jquery, aby kliknąć prawdziwe wejście po kliknięciu obrazu.
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
Teraz twój przycisk działa. Po prostu Wytnij i Wklej wartość po zmianie.
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:44
TLDR; Przykład pracy z natywną obsługą przeciągania i upuszczania: https://jsfiddle.net/ms3bbazv/4/
Podczas stylizacji pliku wejściowego nie należy przerywać żadnej natywnej interakcji wejście zapewnia.
Podejście display: none przerywa natywną obsługę przeciągania i upuszczania.
Aby niczego nie złamać, należy użyć metody opacity: 0 dla wejścia i ustawić go za pomocą względnego / bezwzględnego wzorca w opakowaniu.
Używając tej techniki, możesz łatwo stylizować kliknięcie / drop zone dla użytkownika i dodać niestandardową klasę w javascript na dragenter event, aby zaktualizować style i dać użytkownikowi opinię, aby mógł zobaczyć, że może upuścić plik.
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;
}
Oto działający przykład(z dodatkowym JS do obsługi zdarzeń dragover i upuszczonych plików).
Https://jsfiddle.net/ms3bbazv/4/
Mam nadzieję, że to pomogło !
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-06 14:16:53
VISIBILITY: hidden TRICK
Zwykle wybieram visibility:hidden trick
To mój stylizowany przycisk
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
To jest przycisk input type = file. Zwróć uwagę na regułę visibility:hidden
<input type="file" id="upload" style="visibility:hidden;">
To jest bit JavaScript do sklejenia ich razem. Działa
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-16 14:58:09
Jedyny sposób, jaki mogę wymyślić, to znalezienie przycisku z javascript po jego wyrenderowaniu i przypisanie do niego stylu
Możesz również spojrzeć na Ten writeup
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-21 10:41:05
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
Normalnie używałbym prostego javascript, aby dostosować znacznik wejściowy pliku.Ukryte pole wejściowe, po kliknięciu przycisku, javascript wywołuje ukryte pole, proste rozwiązanie bez żadnego css lub kilka jquery.
<button id="file" onclick="$('#file').click()">Upload File</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-13 19:48:58
Oto rozwiązanie, które tak naprawdę nie stylizuje elementu <input type="file" />, ale zamiast tego używa elementu <input type="file" /> na innych elementach (które można stylizować). Element <input type="file" /> nie jest tak naprawdę widoczny, dlatego ogólna iluzja polega na ładnie wystylizowanej kontroli wysyłania plików.
Natknąłem się na ten problem niedawno i pomimo mnóstwa odpowiedzi na Stack Overflow, żaden naprawdę nie pasował do rachunku. W końcu skończyłem dostosowując to tak, aby mieć prosty i elegancki rozwiązanie.
Przetestowałem to również na Firefoksie, IE (11, 10 i 9), Chrome i operze, iPadzie i kilku urządzeniach z Androidem.
Oto link 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-30 20:35:47
Oto rozwiązanie, które pokazuje również wybraną nazwę pliku: 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; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-15 12:15:17
W tym tygodniu musiałem również dostosować przycisk i wyświetlić wybraną nazwę pliku na bok, więc po przeczytaniu niektórych z powyższych odpowiedzi (dzięki BTW) wymyśliłem następującą implementację:
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 (Angular)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
W zasadzie pracuję z ng-file-upload lib, pod względem kątowym wiążę nazwę pliku z moim $scope i nadaję jej początkową wartość "No file chosen", wiążę również funkcję onFileSelect() z moim scope więc po wybraniu pliku otrzymuję nazwę pliku używając ng-upload API i przypisuję ją do $scope.nazwa pliku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-13 09:06:33
Może dużo awnserów. Ale podoba mi się to w czystym CSS z FA-buttons:
.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"/>Https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-16 17:06:37
Jest to dobry sposób, aby to zrobić z przesłaniem pliku materiał / kąt. Możesz zrobić to samo za pomocą przycisku bootstrap.
Uwaga użyłem <a> zamiast <button> to pozwala zdarzeniom kliknięcia na bańkę.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-13 23:09:13
Tutaj używamy span do wyzwalania wejścia pliku typu I po prostu dostosowaliśmy ten span , więc możemy dodać dowolną stylizację w ten sposób.
Zauważ , że używamy znacznika wejściowego z opcją visibility: hidden i uruchamiamy go w zakresie.
.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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-08 06:26:05
Css może tu wiele zrobić... z odrobiną podstępu...
<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);
}
::Numer referencyjny: http://site-o-matic.net/?viewpost=19
-Opactwo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-20 21:16:48
Znalazłem bardzo łatwą metodę przełączania przycisku plik na zdjęcie. Wystarczy oznaczyć obraz i umieścić go na górze przycisku plik.
<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>
Po kliknięciu na obrazek z etykietą, zaznaczamy przycisk Plik.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-04 07:08:50
TYLKO CSS
Użyj tego bardzo simple i EASY
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-03 13:00:08
Nie daj się zwieść "wspaniałym" rozwiązaniom CSS, które są w rzeczywistości bardzo specyficzne dla przeglądarki, lub które nakładają stylizowany przycisk na górze prawdziwego przycisku, lub które zmuszają cię do użycia <label> zamiast <button>, lub innych takich hakerów. JavaScript jest niezbędny, aby działał do ogólnego użytku. Proszę przestudiuj, jak gmail i DropZone to robią, jeśli mi Nie wierzysz.
Po prostu wystylizuj zwykły przycisk, jak chcesz, a następnie wywołaj prostą funkcję JS, aby utworzyć i połączyć ukryty element wejściowy z Twoim stylizowany przycisk.
<!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>
Zauważ, jak powyższy kod ponownie łączy go po każdym wybraniu pliku przez użytkownika. Jest to ważne, ponieważ "onchange" jest wywoływane tylko wtedy, gdy użytkownik zmieni nazwę pliku. Ale prawdopodobnie chcesz uzyskać plik za każdym razem, gdy użytkownik go dostarcza.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-09 06:34:38
Oto proste rozwiązanie css, które tworzy spójny obszar docelowy i pozwala stylizować sztuczne elementy tak, jak chcesz.
Podstawowa idea jest taka:
- mieć dwa "fałszywe" elementy (wejście tekstowe/link) jako rodzeństwo do rzeczywistego wejścia pliku. Ustaw je tak, by znajdowały się dokładnie na twoim obszarze docelowym.
- zawiń wejście pliku za pomocą div. Ustaw przepełnienie na Ukryte( aby wejście pliku nie wyciekło) i ustaw go dokładnie tak, jak chcesz / align = "left" /
- Ustaw krycie na 0 na wejściu pliku, aby było ukryte, ale nadal można kliknąć. Nadaj mu duży rozmiar czcionki, aby można było kliknąć na wszystkie części Obszaru docelowego.
Oto jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-02 21:46:12
Naprawdę sprytne rozwiązanie przy użyciu jQuery, które działa zarówno we wszystkich starszych przeglądarkach, jak i w nowych, znalazłem Tutaj . Zajmuje się wszystkimi problemami ze stylizacją i kliknięciem (), używając rzeczywistego przycisku przeglądania plików. Zrobiłem prostą wersję javascript: fiddle Rozwiązanie jest tak proste jak geniusz: uczyń wejście pliku niewidzialnym i użyj kawałka kodu, aby umieścić go pod kursorem myszy.
<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>
function file_ho(e, o, a) {
e = window.event || e;
var x = 0,
y = 0;
if (o.offsetParent) {
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (o = o.offsetParent);
}
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}
.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:44
W przypadku, gdy szukasz biblioteki javascript-gotowe rozwiązanie, jQuery-fileinput działa dobrze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-25 21:15:41
Update Nevermind, to nie działa w IE lub jest nowy brat, FF. Działa na każdym innym typie elementu zgodnie z oczekiwaniami, ale nie działa na wejściach plików. Znacznie lepszym sposobem na to jest po prostu utworzenie pliku wejściowego i etykiety, która łączy się z nim. Spraw, aby wejście pliku nie wyświetlało się i boom, działa bezproblemowo w IE9+.
Uwaga: wszystko poniżej to bzdura!
Używając pseudo elementów ustawionych / wielkości względem ich kontenera, możemy uzyskać tylko jeden plik wejściowy (bez dodatkowych znaczników), i styl jak zwykle.
<input type="file" class="foo">
.foo {
display: block;
position: relative;
width: 300px;
margin: auto;
cursor: pointer;
border: 0;
height: 60px;
border-radius: 5px;
outline: 0;
}
.foo:hover:after {
background: #5978f8;
}
.foo:after {
transition: 200ms all ease;
border-bottom: 3px solid rgba(0,0,0,.2);
background: #3c5ff4;
text-shadow: 0 2px 0 rgba(0,0,0,.2);
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: 'Upload Something';
line-height: 60px;
border-radius: 5px;
}
Old Update
Zamieniłem to w Stylus mixin. To powinno być dość łatwe dla jednego z was, cool SCSS cats, aby go przekonwertować.
file-button(button_width = 150px)
display block
position relative
margin auto
cursor pointer
border 0
height 0
width 0
outline none
&:after
position absolute
top 0
text-align center
display block
width button_width
left -(button_width / 2)
Użycie:
<input type="file">
input[type="file"]
file-button(200px)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-26 16:07:45
Jak wspomniano Jguoi CorySimmons, możesz użyć klikalnego zachowania stylowej etykiety, ukrywając mniej elastyczny element wprowadzania plików.
<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:46
Te odpowiedzi są ładne i wszystkie działają na bardzo konkretne przypadki użycia. Oznacza to, że są opiniotwórczy.
Oto odpowiedź, która nie zakłada niczego, ale będzie działać bez względu na to, jak ją zmodyfikujesz. Możesz zmienić projekt za pomocą css, dodać javascript, aby pokazać nazwę pliku przy zmianie itp. zawsze będzie działać.
Kod:
Oto rdzeń css
.file-input{
pointer-events: none;
position: relative;
overflow: hidden;
}
.file-input > * {
pointer-events: none;
}
.file-input > input[type="file"]{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: all;
cursor: pointer;
height: 100%;
width: 100%;
}
I rdzeń html:
<div class="file-input">
<input type="file"/>
</div>
Jak widzisz, wymuszamy dowolny wskaźnik Zdarzenie (klik), które dzieje się na .plik-element wejściowy lub którykolwiek z jego potomków, który ma być proxyowany do pliku wejściowego. Dzieje się tak, ponieważ wejście pliku jest ustawione bezwzględnie i zawsze pochłonie szerokość/wysokość kontenera. W związku z tym można dostosować do swoich potrzeb. styl owijarki w przycisk, Użyj niektórych js, aby wyświetlić nazwę pliku na select, itp. nic nie pęknie tak długo, jak powyższy kod pozostaje nienaruszony.
Jak widać w demo, dodałem {[2] } z tekstem " Wybierz file " I klasy z dodatkowymi stylami do stylu .file-input div. Powinien to być kanoniczny punkt wyjścia dla każdego, kto zamierza utworzyć niestandardowy element przesyłania plików.
Demo:JSFIDDLE
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-04 22:16:56