Стилизация кнопки ввода type = "file"

Question

Как стиль кнопки ввода type="file"?

Answer 1

Это просто с jquery. Пример кода предложения Райана с небольшой модификацией.

Основной HTML:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Обязательно установите стиль на входе, когда будете готовы: opacity: 0 Вы не можете установить display: none, потому что он должен быть кликабельным. Но вы можете расположить его под «новой» кнопкой или заправить под что-нибудь еще с помощью z-index.

Настройте некоторые jquery для щелчка по реальному вводу при нажатии на изображение.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Теперь ваша кнопка работает. Просто измените и вставьте значение при изменении.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Тах да! Возможно, вам придется проанализировать val () на что-то более значимое, но вы должны быть готовы.

Answer 2

Вот решение, которое на самом деле не стилизует элемент <input type="file" />, а вместо этого использует элемент <input type="file" /> поверх других элементов (которые можно стилизовать). Элемент <input type="file" /> на самом деле не виден, следовательно, общая иллюзия - это красиво стилизованный элемент управления загрузкой файлов.

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

Я также протестировал это на Firefox, IE (11, 10 и 9), Chrome и Opera, iPad и некоторых устройствах Android.

Вот ссылка JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});

body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

Надеюсь, это поможет !!!

Answer 3

ВИДИМОСТЬ: скрытый ТРИК

Я обычно хожу на visibility:hidden трюк

это моя стилизованная кнопка

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

это тип ввода = кнопка файла. Обратите внимание на visibility:hidden правило

<input type="file" id="upload" style="visibility:hidden;">

это бит JavaScript, чтобы склеить их вместе. Работает

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

Answer 4

я могу думать только о том, чтобы найти кнопку с javascript после рендеринга и назначить ей стиль

Вы также можете посмотреть на эту запись

Answer 5

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

Я бы обычно использовал простой javascript для настройки тега ввода файла. Скрытое поле ввода, по нажатию кнопки, вызов javascript скрытого поля, простое решение без любого css или связки jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>

Answer 6

Поместите кнопку загрузки файла поверх красивой кнопки или элемента и скройте ее.

Очень просто и будет работать в любом браузере

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

Стили

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

Answer 7

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

Обратите внимание , что мы используем входной тег с параметром видимости: скрытый и запускаем его в диапазоне.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Ссылка

Answer 8

Может быть, много поклонников. Но мне нравится это в чистом CSS с fa-кнопками:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}

<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Скрипка: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Answer 9

Вот решение, которое также показывает выбранное имя файла: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

Answer 10

Это хороший способ сделать это с загрузкой материала / угловых файлов. Вы можете сделать то же самое с помощью кнопки начальной загрузки.

Примечание. Я использовал <a> вместо <button>, что позволяет всплыть событиям клика.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>