Показывать только текст во вводе файла
Я пытаюсь добавить текст, чтобы показать, выбрал ли пользователь изображение для ввода настраиваемого файла.
В настоящее время у меня есть следующий элемент со статическим текстом:
Я добавлю текст под статическим текстом, чтобы показать, выбран ли файл и имя файла.
Я хочу отображать только текст во вводе файла. Другими словами, я хочу скрыть только элемент кнопки, а не текст.
Я думаю, что файловый ввод работает как-то иначе, чем все другие компоненты html.
Один из способов сделать это - попытаться получить текстовую переменную, которая отображается справа и при наведении курсора.
Возможный дубликат Как отобразить имя файла для пользовательского стилизованного входного файла с помощью jquery?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
You can use this Simple Stuff for select file using button as given bellow Example.
.hide{
display:none;
}
.btn-file{
background:lightblue;
padding:50px;
border:none;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "file" class = "hide" id = "file-btn">
<button type = "button" class = "btn-file" onclick = "$('#file-btn').click()">Upload File</button>Во-первых, здесь вы используете jQuery, который не нужен, во-вторых, вы не обновляете текст, который нужен OP ...
где упоминается, что здесь не разрешают пользователю jquery?
Тег jquery не добавлен
Здесь - удобная статья.
...there is no JavaScript-less way to indicate if any files were selected...
Однако есть хитрость. Вы можете поместить ввод файла под пользовательским вводом следующим образом:
.inputfile {
overflow: hidden;
position: absolute;
z-index: -1;
margin-left: 12px;
outline: none;
}
.inputfile+label {
background: #DDD;
cursor: pointer;
border: 1px solid #AAA;
outline: none;
padding: 5px 8px;
}
.inputfile+label:hover {
box-shadow: 0 0 5px 1px #DDD;
}
.inputfile+label:active {
box-shadow: 0 0 5px 2px #CCC;
}
.inputfile+label {
cursor: pointer;
}
.inputfile+label * {
pointer-events: none;
}<input type = "file" name = "file" id = "file" class = "inputfile" />
<label for = "file">Choose a file</label>Или, если вам нужен только текст, а не кнопка вот пример
.inputfileholder {
overflow: hidden;
max-width: 200px;
height: 21px;
position: relative
}
.inputfileholder .inputfile {
position: absolute;
left: -90px;
outline: none;
}<div class = "inputfileholder">
<input type = "file" name = "file" id = "file" class = "inputfile" />
</div>Значение left для inputfile и height в inputfileholder может отличаться в зависимости от языка. Вот только пример.
$('.form-field-file').each(function(){
var label = $('label', this);
var labelValue = $(label).html();
var fileInput = $('input[type = "file"]', this);
$(fileInput).on('change', function(){
var fileName = $(this).val().split('\\').pop();
if (fileName) {
$(label).html(fileName);
}
else {
$(label).html(labelValue);
}
});
});.form-field-file label {
position: relative;
display: inline-block;
width: auto;
height: 50px;
padding: 50px 50px;
background: #aaa;
color: #000;
border-radius: 2px;
font-size: rem(13);
line-height: 44px;
font-weight: 700;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
transition: background 0.25s ease-in-out;
}
.form-field-file label:hover, .form-field-file label:active {
background: shade(#336699, 34%);
}
.form-field-file label:after {
position: absolute;
top: 0;
z-index: 2;
display: block;
font-family: 'FontAwesome';
}
.form-field-file input[type = "file"] {
position: absolute;
z-index: -1;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-field form-field-file">
<label for = "file-upload">CHOOSE FILE...</label>
<input type = "file" name = "file-upload" id = "file-upload"/>
</div>
Возможный дубликат Стилизация кнопки input type = "file"