Изменить текст по умолчанию в поле ввода type="file"?
Я хочу изменить текст по умолчанию на кнопке "Choose File"когда мы используем input="file",
Как я могу это сделать? Также, как вы можете видеть на изображении, кнопка находится на левой стороне текста. Как я могу поставить его на правой стороне текста?
25 ответов
Каждый браузер имеет свое собственное представление элемента управления, и поэтому вы не можете изменить ни текст, ни ориентацию элемента управления.
Есть некоторые "разновидности" хаков, которые вы можете попробовать, если вам нужно решение 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>Я думаю, что это то, что вы хотите:
<!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>Это может помочь кому-то в будущем, вы можете стилизовать метку для ввода по своему усмотрению, поместить в нее все, что захотите, и скрыть ввод без отображения.
Отлично работает на кордове с 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"><button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
This is still the best so far
Это невозможно. В противном случае вам может понадобиться использовать Silverlight или элемент управления загрузкой Flash.
$(document).ready(function () {
$('#choose-file').change(function () {
var i = $(this).prev('label').clone();
var file = $('#choose-file')[0].files[0].name;
$(this).prev('label').text(file);
});
});.custom-file-upload{
background: #f7f7f7;
padding: 8px;
border: 1px solid #e3e3e3;
border-radius: 5px;
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this
<label for="choose-file" class="custom-file-upload" id="choose-file-label">
Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file"
accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />Обновление 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;
});
});
Но на самом деле просто прочитайте учебник и скачайте демо, это действительно хорошо.
Вот как вы можете это сделать:
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>
Вы можете использовать этот подход, он работает, даже если много файлов ввода.
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>Это должно работать:
вход.className:: - webkit-file-upload-button { стиль содержимого..}
Используя 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>
Я сделал скрипт и опубликовал его на 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
Вот как это делается с помощью начальной загрузки, только u должен поместить исходный ввод где-то...idk в голову и удалить
, если он у вас есть, потому что он только скрыт и все равно занимает место:)
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
<input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
<footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</footer>Мое решение...
HTML:
<input type="file" id="uploadImages" style="display:none;" multiple>
<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">
JQuery:
$('#callUploadImages').click(function(){
$('#uploadImages').click();
});
$('#uploadImages').change(function(){
var uploadImages = $(this);
$('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});
Это просто зло:D
Я создаю сценарий, который может быть проще.
Например:
<input data-com="fileBtn" placeholder="Select Image">
в основном мой скрипт очень похож на эту ссылку
Код
Чистый javascript, никаких зависимостей не требуется
Ссылка
Я бы использовал button вызвать input:
<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />
Quick and clean.
Позвольте мне добавить взлом, который я использовал. Я хотел иметь раздел, который позволял бы вам перетаскивать файлы, и я хотел, чтобы этот раздел перетаскивания можно было нажимать вместе с оригинальной кнопкой загрузки.
Вот как это выглядело, когда я закончил (за исключением способности перетаскивания, есть много уроков о том, как это сделать).
А потом я на самом деле создал серию постов в блоге, в основном о кнопках загрузки файлов.
Итак, очень простой чистый 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;
}
теперь, как вы могли заметить, у меня есть тот же класс на моем ярлыке, что и у моего поля ввода, потому что я хочу, чтобы у обоих был один и тот же стиль, поэтому, когда бы вы ни нажимали на ярлык, вы фактически нажимаете на невидимое поле ввода.
Настройте вводимый текст (без jQuery)
Если вы хотите настроить текст кнопки выбора файла с помощью стандартного JavaScript, вот фрагмент:
Если вы хотели стилизовать кнопку выбора файла, у меня есть решение:стилизация кнопки input type="file" .
В Javascript вы можете присвоить элементу ввода атрибут title, например:
<input type="file" id="upload_photo" title=""onChange={onChangeTextHandle}/>
С ответами на этот вопрос я исправил то, что многие в комментариях сказали, что они не работают для них, а именно то, что он не показывает, сколько файлов выбрал пользователь.
<label for="uploadedFiles" class="btn btn-sm btn-outline-primary">Choose files</label>
<input type="file" name="postedFiles" id="uploadedFiles" multiple="multiple" hidden onchange="javascript:updateList()" />
<input class="btn btn-primary mt-2 btn-action" type="submit" value="Send" formmethod="post" formaction="@Url.Action("Create")" /><br />
<span id="selected-count">Selected files: 0</span>
<script>
updateList = function () {
var input = document.getElementById('uploadedFiles');//list of files user uploaded
var output = document.getElementById('selected-count');//element displaying count
output.innerHTML = 'Selected files: ' + input.files.length;
}
</script>
Вы можете легко улучшить его, показывая вместо этого имена файлов или что-то еще, что вы хотите сделать, но все, что я хотел, это сообщить пользователю, что он уже выбрал файлы.
Вы можете использовать простую кнопку и скрыть входной файл
используя jquery и бутстрап:
HTML-код
<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">
CSS:
.hidden{display:none}
JS:
$("#btn-file").click(function () {
$("#input-file").trigger('click');
});
$("#input-file").change(function () {
var file = $(this)[0].files[0].name;
$("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});
