Изменить текст по умолчанию в поле ввода type = "file"? - PullRequest
147 голосов
/ 28 февраля 2011

Я хочу изменить текст по умолчанию для кнопки "Choose File", когда мы используем input="file".

enter image description here

Как я могу это сделать?Также, как вы можете видеть на изображении, кнопка находится на левой стороне текста.Как я могу поставить его на правой стороне текста?

Ответы [ 15 ]

134 голосов
/ 20 ноября 2015

Используйте "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>
43 голосов
/ 28 февраля 2011

Каждый браузер имеет свое собственное представление элемента управления, и поэтому вы не можете изменить ни текст, ни ориентацию элемента управления.

Есть некоторые «разновидности» хаков, которые вы можете попробовать, есливам нужно решение / вместо Flash или .

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Лично, поскольку большинство пользователей выбирают свой браузер и поэтому, вероятно, привыкли видеть элемент управления в представлении по умолчанию, они, вероятно, запутаются, если увидят что-то другое (в зависимости от типовпользователи, с которыми вы имеете дело).

21 голосов
/ 09 мая 2016

Это может помочь кому-то в будущем, вы можете стилизовать метку для ввода так, как вам нравится, и поместить в нее все, что захотите, и скрыть ввод без отображения.

Отлично работает на Cordova с 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">
16 голосов
/ 20 апреля 2017

Я думаю, это то, что вы хотите:

<!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>
8 голосов
/ 28 февраля 2011

Это невозможно.В противном случае вам может понадобиться использовать Silverlight или элемент управления загрузкой Flash.

3 голосов
/ 12 февраля 2016

Вот как вы можете это сделать:

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>
2 голосов
/ 30 октября 2017

Обновление 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;
});
});

Но на самом деле просто прочитайте учебник и скачайте демо, это действительно хорошо.

2 голосов
/ 10 июня 2017

Я сделал скрипт и опубликовал его на 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

jsfiddle.net / Thielicious / 4oxmsy49 /

2 голосов
/ 22 сентября 2016

Используя 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>
1 голос
/ 28 июля 2017

Я бы использовал button для запуска input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Быстро и чисто.

...