Можно ли изменить внешний вид <input type="file">?
Как настроить <input type="file">?
Ответ 1
Вы не можете сильно изменить сам элемент управления input[type=file].
Поскольку щелчок по элементу label, правильно соединенному с входом, активирует/фокусирует его, мы можем использовать label, чтобы вызвать диалоговое окно обзора ОС.
Вот как вы можете это сделать...
label {
cursor: pointer;
/* Style as you please, it will become the visible UI component. */
}
#upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />Ответ 2
Может быть, что-то подобное?
<form>
<input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>
<script>
$(document).ready( function() {
$('#falseinput').click(function(){
$("#fileinput").click();
});
});
$('#fileinput').change(function() {
$('#selected_filename').text($('#fileinput')[0].files[0].name);
});
</script>
Ответ 3
<label for="fusk">dsfdsfsd</label>
<input id="fusk" type="file" name="photo" style="display: none;">
почему бы и нет? ^ _ ^
См. пример здесь
Ответ 4
Если вы используете загрузчик, вот лучшее решение:
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;">
</label>
Для IE8 и ниже http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
Источник: fooobar.com/questions/15046/...
Ответ 5
Самый простой способ..
<label>
Upload
<input type="file" style="visibility: hidden;"/>
</label>
Ответ 6
В webkit вы можете попробовать это...
input[type="file"]::-webkit-file-upload-button{
/* style goes here */
}
Ответ 7
прежде всего это контейнер:
<div class="upload_file_container">
Select file!
<input type="file" name="photo" />
</div>
Во-вторых, это стиль CSS, если вы хотите больше настраивать, просто держать глаза открытыми:)
.upload_file_container{
width:100px;
height:40px;
position:relative;
background(your img);
}
.upload_file_container input{
width:100px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
}
В этом примере нет стиля для текста внутри кнопки, это зависит от размера шрифта, просто верьте высоту и верхние значения для контейнера
Ответ 8
Это намного лучше, если вы просто используете <label>, спрячьте <input> и настройте метку.
HTML:
<input type="file" id="input">
<label for="input" id="label">Choose File</label>
CSS:
input#input{
display: none;
}
label#label{
/* Customize your label here */
}
Ответ 9
Трюк скрывает ввод и настраивает метку.
HTML:
<div class="inputfile-box">
<input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
<label for="file">
<span id="file-name" class="file-box"></span>
<span class="file-button">
<i class="fa fa-upload" aria-hidden="true"></i>
Select File
</span>
</label>
</div>
CSS
.inputfile-box {
position: relative;
}
.inputfile {
display: none;
}
.container {
display: inline-block;
width: 100%;
}
.file-box {
display: inline-block;
width: 100%;
border: 1px solid;
padding: 5px 0px 5px 5px;
box-sizing: border-box;
height: calc(2rem - 2px);
}
.file-button {
background: red;
padding: 5px;
position: absolute;
border: 1px solid;
top: 0px;
right: 0px;
}
JS:
function uploadFile(target) {
document.getElementById("file-name").innerHTML = target.files[0].name;
}
Вы можете проверить этот пример: https://jsfiddle.net/rjurado/hnf0zhy1/4/
Ответ 10
Пример начальной загрузки
<label className="btn btn-info btn-lg">
Upload
<input type="file" style="display: none" />
</label>
Ответ 11
Я пошел для этой опции, которая уточняет, как полностью настроить кнопку обзора, включив обработчик загруженного имени файла, также настроенный. Он добавляет дополнительные поля и элементы управления на стороне клиента, чтобы показать, как включить просмотр в "реальную" форму, а не только отдельную.
Здесь codepen: http://codepen.io/emiemi/pen/zxNXWR
JS:
//click on our custom btn triggers a click on the hidden actual file input
$("#btnup").click(function(){
$("#fileup").click();
});
//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file
var res=$('#fileup').val();
var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 && formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 && formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
$( ".imgupload" ).hide("slow");
$( ".imguploadok" ).hide("slow");
$( ".imguploadstop" ).show("slow");
$('#nomefile').css({"color":"red","font-weight":700});
$('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}else{
//if file is valid we show the green alert
$( ".imgupload" ).hide("slow");
$( ".imguploadstop" ).hide("slow");
$( ".imguploadok" ).show("slow");
$('#nomefile').html(arr.slice(-1)[0]);
$('#nomefile').css({"color":"green","font-weight":700});
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
//if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}
}
});
$('#nome').change(function(){
//same as file change but on name field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
$('#tit').change(function(){
//same as file change but on tit field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
HTML:
<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
<div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
<input type="file" value="" class="hidden" name="fileup" id="fileup">
<div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
<h1 class="imguploadok"><i class="fa fa-check"></i></h1>
<h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
<p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
</div>
</div>
<!--additional fields-->
<div class="col-md-6">
<div class="row">
<div class="form-group" id="top">
<div class="col-md-12">
<input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p class="white">All fields are mandatory</p>
</div>
<div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
<input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn" style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
</div>
</div>
</div>
</div>
Ответ 12
чтобы показать путь к выбранному файлу, вы можете попробовать это по html:
<div class="fileinputs">
<input type="file" class="file">
</div>
и в javascript:
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var image = document.createElement('div');
image.className='fakebtn';
image.innerHTML = 'browse';
fakeFileUpload.appendChild(image);
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
и стиль:
div.fileinputs {
position: relative;
height: 30px;
width: 370px;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
right: 0;
width: 370px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
border: none;
box-shadow: 0px 0px 2px 1px #ccc;
padding: 4px;
width: 241px;
height: 20px;
}
div.fakefile .fakebtn{
width: 150px;
background: #eb5a41;
z-index: 10;
font-family: roya-bold;
border: none;
padding: 5px 15px;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline;
margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
background: #DA472E;
}
div.fileinputs input[type="file"] {
opacity: 0;
position: absolute;
top: -6px;
right: 0px;
z-index: 20;
width: 102px;
height: 40px;
cursor: pointer;
}
Ответ 13
Вот один из способов, который мне нравится, потому что он заставляет вход заполнять весь контейнер. Трюк - это "font-size: 100px", и ему нужно перейти с "переполнением: скрытым" и относительным положением.
<div id="upload-file-container" >
<input type="file" />
</div>
#upload-file-container {
width: 200px;
height: 50px;
position: relative;
border: dashed 1px black;
overflow: hidden;
}
#upload-file-container input[type="file"]
{
margin: 0;
opacity: 0;
font-size: 100px;
}
Ответ 14
Вы можете их стилизовать, но вы не можете удалить уже существующие элементы. Если вы креативны, вы можете работать с этим и делать что-то вроде этого:
input[type=file] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #EEE;
background: linear-gradient(to top, #FFF, #DDD);
border: thin solid rgba(0,0,0, .5);
border-radius: .25em;
box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
cursor: text;
padding: .25em;
}
http://jsfiddle.net/zr1x1m2b/1/
Я предлагаю вам поиграть с этим кодом, удалять строки, добавлять свои собственные, делать все, пока не получите то, что вам нравится!
Ответ 15
Просто создайте обычную кнопку, но вы хотите, используя ваш любимый CSS.
Затем вызовите простую функцию JS, чтобы создать и связать скрытый элемент ввода с вашей стилизованной кнопкой. Не добавляйте CSS для браузера, чтобы сделать скрытую часть.
<!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>
Обратите внимание, как приведенный выше код повторно связывает его после каждого выбора пользователем файла. Это важно, потому что "onchange" вызывается только в том случае, если пользователь меняет имя файла. Но вы, вероятно, захотите получить файл каждый раз, когда пользователь предоставит его.
Для получения дополнительной информации, исследования DropZone и gmail загружаются.
Ответ 16
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>Ответ 17
Вот быстрый обходной путь на чистом CSS (работает на Chrome и включает запасной вариант FireFox), включая имя файла, метку и пользовательскую кнопку загрузки, и делает то, что должен - вообще не нужен JavaScript! A
Примечание: ☝ Это работает в Chrome и имеет запасной вариант FireFox - в любом случае, я бы не стал использовать его на веб-сайте реального мира - если для вас важна совместимость браузера (какой она должна быть). Так что это скорее экспериментально.
.fileUploadInput {
display: grid;
grid-gap: 10px;
position: relative;
z-index: 1; }
.fileUploadInput label {
display: flex;
align-items: center;
color: setColor(primary, 0.5);
background: setColor(white);
transition: .4s ease;
font-family: arial, sans-serif;
font-size: .75em;
font-weight: regular; }
.fileUploadInput input {
position: relative;
z-index: 1;
padding: 0 gap(m);
width: 100%;
height: 50px;
border: 1px solid #323262;
border-radius: 3px;
font-family: arial, sans-serif;
font-size: 1rem;
font-weight: regular; }
.fileUploadInput input[type="file"] {
padding: 0 gap(m); }
.fileUploadInput input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
margin-left: 10px;
padding: 0;
height: 50px;
width: 0; }
.fileUploadInput button {
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
line-height: 0;
user-select: none;
color: white;
background-color: #323262;
border-radius: 0 3px 3px 0;
font-family: arial, sans-serif;
font-size: 1rem;
font-weight: 800; }
.fileUploadInput button svg {
width: auto;
height: 50%; }
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
border: 0px;
outline: 0;
background-repeat: no-repeat;
appearance: none;
border-radius: 0;
vertical-align: middle;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-decoration: none;
list-style: none;
user-select: text;
line-height: 1.333em; }
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: rgba(66, 50, 98, 0.05); }
.container {
padding: 25px;
box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
border: 1px solid #eaeaea;
border-radius: 3px;
background: white; }
@-moz-document url-prefix() {
.fileUploadInput button{
display: none
}
}<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->
<div class="container">
<div class="fileUploadInput">
<label>✨ Upload File</label>
<input type="file" />
<button>+</button></div>
</div>Ответ 18
Вот один из способов, который я недавно обнаружил, с немного jQuery
Код HTML:
<form action="">
<input type="file" name="file_upload" style="display:none" id="myFile">
<a onclick="fileUpload()"> Upload a file </a>
</form>
Для части javascript/jQuery:
<script>
function fileUpload() {
$("#myFile").click();
}
</script>
В этом примере я поставил тег "anchor" для запуска загрузки файла. Вы можете заменить все, что хотите, просто не забудьте указать атрибут "onclick" с надлежащей функцией.
Надеюсь, это поможет!
P.S.: Не забудьте включить jQuery из CDN или любого другого источника