Я хочу изменить текст по умолчанию на кнопке, которая "Choose File", когда мы используем input="file".
Как я могу это сделать? Также, как вы можете видеть, кнопка изображения находится в левой части текста. Как я могу поместить его в правую часть текста?
Каждый браузер имеет свое собственное представление элемента управления, и поэтому вы не можете изменить ни текст, ни ориентацию элемента управления.
Есть некоторые "разновидности" хаков, которые вы можете попробовать, если вы хотите решение html/css, а не решение Flash или silverlight.
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Лично, поскольку большинство пользователей предпочитают свой браузер и поэтому, вероятно, привыкли видеть элемент управления в представлении по умолчанию, они, вероятно, запутаются, если увидят что-то другое (в зависимости от типов пользователей, с которыми вы имеете дело),
Используйте атрибут "for" label для input.
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
$("#files").change(function() {
filename = this.files[0].name
console.log(filename);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>Это может помочь кому-то в будущем, вы можете стилизовать метку для ввода, как вам нравится, и поместить в нее все, что хотите, и скрыть ввод с отображением none.
Он отлично работает на кордове с iOS
<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
</body>
</html>Это невозможно. В противном случае вам может потребоваться использовать управление загрузкой Silverlight или Flash.
Вот как вы можете это сделать:
JQuery
$(function() {
$("#labelfile").click(function() {
$("#imageupl").trigger('click');
});
})
CSS
.file {
position: absolute;
clip: rect(0px, 0px, 0px, 0px);
display: block;
}
.labelfile {
color: #333;
background-color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 8px;
font-size: 14px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
HTML-код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
<input name="imageupl" type="file" id="imageupl" class="file" />
<label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
Используя Bootstrap, вы можете сделать это, как показано ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.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;
}
</style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
Я сделал script и опубликовал его в GitHub: get selectFile.js Прост в использовании, не стесняйтесь клонировать.
HTML
<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>
JS
var getFile = new selectFile;
getFile.targets('choose','selected');
DEMO
Обновление 2017:
Я провел исследование того, как это может быть достигнуто. И лучшее объяснение/учебник здесь: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Я напишу резюме здесь на всякий случай, когда он станет недоступен. Поэтому у вас должен быть HTML:
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
Затем скройте ввод с помощью CSS:
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
Затем введите метку:
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
Затем дополнительно вы можете добавить JS для отображения имени файла:
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
});
Но на самом деле просто прочитайте учебник и загрузите демоверсию, это действительно хорошо.
Я бы использовал button для запуска input:
<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />
Быстро и чисто.
Это должно работать:
input.className:: - webkit-file-upload-button { стиль контента. }
Позвольте добавить хак, который я использовал. Я хотел иметь раздел, который позволял вам перетаскивать файлы, и я хотел, чтобы раздел перетаскивания был доступен для клика вместе с исходной кнопкой загрузки.
Вот как это выглядело как, когда я был сделан (за вычетом способности перетаскивания, есть много уроков о том, как это сделать).
И тогда я фактически создал серию сообщений в блоге, которые в основном касаются кнопок загрузки файлов.
Хорошо, так просто, просто css способ создания вашего пользовательского входного файла.
Используйте ярлыки, но, как вы знаете из предыдущих ответов, метка не вызывает onclick функция в firefox, может быть ошибкой, но не имеет значения со следующим.
<label for="file" class="custom-file-input"><input type="file" name="file" class="custom-file-input"></input></label>
Что вы делаете, так это стиль ярлыка, чтобы посмотреть, как вы хотите его
.custom-file-input {
color: transparent;/* This is to take away the browser text for file uploading*/
/* Carry on with the style you want */
background: url(../img/doc-o.png);
background-size: 100%;
position: absolute;
width: 200px;
height: 200px;
cursor: pointer;
top: 10%;
right: 15%;
}
теперь просто скройте фактическую кнопку ввода, но вы не можете установить ее на visability: hidden
Итак, сделайте невидимым, установив opacity: 0;
input.custom-file-input {
opacity: 0;
position: absolute;/*set position to be exactly over your input*/
left: 0;
top: 0;
}
теперь, как вы могли заметить, у меня есть тот же класс на моем ярлыке, что и в моем поле ввода, потому что я хочу, чтобы оба имели одинаковый стиль, поэтому, когда вы нажимаете на метку, вы на самом деле щелкаете в невидимом поле ввода.
Вы можете использовать этот подход, он работает, даже если много файлов ввода.
const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')
;[...buttons].forEach(function (btn) {
btn.onclick = function () {
btn.parentElement.querySelector('input[type="file"]').click()
}
})
;[...fileBlocks].forEach(function (block) {
block.querySelector('input[type="file"]').onchange = function () {
const filename = this.files[0].name
block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
}
}).btn-select-file {
border-radius: 20px;
}
input[type="file"] {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
<button class="btn-select-file">Select Image 1</button>
<input type="file">
</div>
<br>
<div class="file-block">
<button class="btn-select-file">Select Image 2</button>
<input type="file">
</div><button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
Это пока лучший