Як ви стилізуєте type="file"кнопку введення ?

Введення файлів для вкладення файлів є надзвичайно складним, оскільки більшість браузерів не змінить зовнішній вигляд ні з CSS, ні з JavaScript.

Навіть розмір вводу не відповідатиме подобається:

<input type="file" style="width:200px">

Замість цього вам потрібно буде використовувати атрибут size:

<input type="file" size="60" />

Для будь-якого стилю, більш складного (наприклад, зміна вигляду кнопки перегляду), вам потрібно буде ознайомитися з хитромудрим підходом до накладання стилізованої кнопки та поля введення поверх вхідного файлу. Стаття, про яку Rm вже згадувала на сайті www.quirksmode.org/dom/inputfile.html, - найкраща, яку я бачив.

ОНОВЛЕННЯ

Хоча <input>безпосередньо стилювати тег важко , це легко можливо за допомогою <label>тегу. Дивіться відповідь нижче від @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Для цього вам не потрібен JavaScript! Ось крос-браузерне рішення:

Дивіться цей приклад! - Він працює в Chrome / FF / IE - (IE10 / 9/8/7)

Найкращим підходом було б мати спеціальний елемент мітки з forатрибутом, приєднаним до прихованого елемента введення файлу. (Атрибут мітки forповинен відповідати елементу файлу, idщоб це працювало).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Як альтернативу, ви можете також просто обернути елемент введення файлу безпосередньо міткою: (приклад)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

Що стосується стилю, просто схойте ¹ елемент введення, використовуючи селектор атрибутів .

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

Тоді все, що вам потрібно зробити, - це стильовий labelелемент. (приклад) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

¹ - Варто зазначити, що якщо ви заховаєте елемент за допомогою display: none, він не працюватиме в IE8 та нижче. Також пам’ятайте про той факт, що jQuery validate не перевіряє приховані поля за замовчуванням. Якщо будь-яка з цих речей є проблемою для вас, ось два різних способи приховати вхід ( 1 , 2 ), які працюють у цих умовах.

виконайте наступні дії, тоді ви можете створити власні стилі для форми завантаження файлів:

1. це проста форма HTML (будь ласка, прочитайте коментарі HTML, які я написав тут нижче)

   <form action="#type your action here" method="POST" enctype="multipart/form-data">
     <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
     <!-- this is your file input tag, so i hide it!-->
     <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
     <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
     <input type="submit" value='submit' >
   </form>
   

2. потім використовуйте цей простий скрипт, щоб передати подію натискання на тег введення файлу.

   function getFile(){
        document.getElementById("upfile").click();
   }
   

   Тепер ви можете використовувати будь-який тип стилю, не турбуючись про те, як змінити стилі за замовчуванням.

Я це дуже добре знаю, бо вже півтора місяці намагаюся змінити стилі за замовчуванням. повірте, це дуже важко, тому що різні веб-переглядачі мають різні теги для завантаження. Тому використовуйте цю для створення власних форм завантаження файлів. Ось повний код автоматичної завантаження.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

Прихойте його за допомогою css та використовуйте користувальницьку кнопку з $ (селектор) .click (), щоб активувати кнопку перегляду. потім встановіть інтервал для перевірки значення типу введення файлу. інтервал може відображати значення для користувача, щоб користувач міг бачити, що завантажується. інтервал буде очищений, коли форма подається [EDIT] Вибачте, я дуже зайнятий був сенс оновити цю публікацію, ось приклад

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Fiddle : http://jsfiddle.net/M7BXC/

Ви також можете досягти своїх цілей без jQuery за допомогою звичайного JavaScript.

Тепер newBtn посилається на html_btn, і ви можете стилізувати свій новий btn так, як хочете: D

Усі двигуни візуалізації автоматично створюють кнопку при <input type="file">створенні. Історично ця кнопка була абсолютно неможлива. Однак Trident і WebKit додали гачки через псевдоелементи.

Тризуб

Станом на IE10, кнопку введення файлу можна стилізувати за допомогою ::-ms-browseпсевдоелемента. По суті, будь-які правила CSS, які ви застосовуєте до звичайної кнопки, можуть бути застосовані до псевдоелементу. Наприклад:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

Це відображається наступним чином в IE10 для Windows 8:

WebKit

WebKit забезпечує гачок для кнопки введення файлів з ::-webkit-file-upload-buttonпсевдоелементом. Знову ж таки, можна застосувати практично будь-яке правило CSS, тому тут також працюватиме приклад Trident:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

Це відображається у Chrome 26 на ОС X:

Якщо ви використовуєте Bootstrap 3, це працювало для мене:

Дивіться http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Який створює таку кнопку введення файлу:

Серйозно, перевірте http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Робочий приклад тут із нативною підтримкою перетягування: https://jsfiddle.net/j40xvkb3/

Під час стильового введення файлу ви не повинні порушувати жодної нативної взаємодії, яку надає вхід .

display: noneПідхід руйнує нативную підтримку перетягування.

Щоб нічого не порушувати, слід використовувати opacity: 0підхід для введення та розміщувати його, використовуючи відносний / абсолютний візерунок у обгортці.

Використовуючи цю техніку, ви можете легко стилювати зону клацання / випадання для користувача та додавати користувальницький клас у javascript під час dragenterподії для оновлення стилів та надання відгуку користувачеві, щоб він міг бачити файл.

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Ось робочий приклад (з додатковим JS для обробки dragoverподій та файлів, що випали).

https://jsfiddle.net/j40xvkb3/

Сподіваюся, це допомогло!

Я можу це зробити з чистим CSS, використовуючи код нижче. Я використовував завантажувальний і шрифтовий дивовижний.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

 <label>
    <input type="file" />
 </label>

Ви можете загортати вхідний тип = "файл" всередину мітки для введення. Стилюйте етикетку, як вам хотілося, і прихойте вхід з дисплеєм: немає;

Ось рішення, яке насправді не стильовий <input type="file" />елемент, але замість цього використовується <input type="file" />елемент поверх інших елементів (які можна стилізувати). <input type="file" />Елемент не дуже видно , отже, загальна ілюзія має красиво стилізоване управління завантаженням файлів.

Нещодавно я зіткнувся з цією проблемою, і, незважаючи на безліч відповідей на Stack Overflow, начебто, жоден дійсно не відповідав законопроекту. Зрештою, я закінчила налаштування цього, щоб мати просте і елегантне рішення.

Я також протестував це на 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>

Сподіваюся, це допомагає !!!

Це просто за допомогою 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-індексом, якщо хочете.

Налаштуйте деякий 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 () на щось більш значиме, але вам слід налаштувати все.

Покладіть кнопку завантаження файлу над приємною кнопкою або елементом і прихойте її.

Дуже просто і працюватиме в будь-якому браузері

<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;
}

ВІДОМОСТЬ: прихований ТРИК

Зазвичай я йду на 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>

Єдиний спосіб, про який я можу придумати, - це знайти кнопку з JavaScript після того, як вона буде надана та призначити їй стиль

Ви також можете подивитися на цю підписку

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

Зазвичай я використовую простий javascript, щоб налаштувати введення файлу tag.Заховане поле введення, натискання кнопки, виклик JavaScript прихованим полем, просте рішення з будь-якого CSS або купою jquery.

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

Тут ми використовуємо проміжок для запуску введення файлу типу, і ми просто настроїли цей проміжок , тому ми можемо додати будь-який стиль, використовуючи цей спосіб.

Зауважте, що ми використовуємо вхідний тег із видимістю: прихований параметр і запускаємо його в проміжок часу.

.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>

Довідково

Це хороший спосіб зробити це з завантаженням матеріалів / кутових файлів. Ви можете зробити те ж саме за допомогою кнопки завантаження.

Примітка. Я використовував <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>

ТІЛЬКИ CSS

Використовуйте це дуже просто і ЛЕГКО

Html:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

Css:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

Можливо, багато тентів. Але мені це подобається в чистому CSS з фа-кнопками:

.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"/>

Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Не обманюйте "чудові" рішення, що стосуються лише CSS, які насправді є дуже орієнтованими на браузер, або які накладають стильову кнопку поверх реальної кнопки, або що змушує вас використовувати <label>замість <button>, або будь-який інший такий хак . JavaScript необхідний для загального використання. Будь ласка, вивчіть, як це роблять Gmail та DropZone, якщо ви мені не вірите.

Просто введіть звичайну кнопку, як вам захочеться, а потім зателефонуйте на просту функцію JS, щоб створити та прив’язати прихований вхідний елемент до стилізованої кнопки.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Зауважте, як вищевказаний код повторно пов'язує його після кожного вибору користувача. Це важливо, оскільки "onchange" викликається лише у випадку, якщо користувач змінить ім'я файлу. Але ви, мабуть, хочете отримати файл щоразу, коли користувач його надає.

Різне файлове рішення з перетвореною назвою файлу

ПРИКЛАД для завантаження

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS з jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS без jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

Ось рішення, яке також показує вибране ім'я файлу: 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; }

На цьому тижні мені також потрібно було настроїти кнопку та відобразити вибране ім’я файлу в стороні, тому, прочитавши деякі відповіді вище (спасибі BTW), я придумав таку реалізацію:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (кутовий)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

В основному я працюю з lig для завантаження файлів ng-file, кутово-мудро, я прив'язую ім’я файлу до моїй області $ і надаю йому початкове значення "Не вибрано файл", я також прив'язую функцію onFileSelect () до мій діапазон, тому коли файл вибирається, я отримую ім'я файлу за допомогою API ng-upload і присвоюю його $ names.filename.

Просто імітуйте клацання на <input>, використовуючи trigger()функцію при натисканні на стилі <div>. Я створив свою власну кнопку з, <div>а потім викликав натискання на, inputколи клацнув мій <div>. Це дозволяє вам створити свою кнопку, але ви хочете, тому що це <div>і імітує клацання на вашому файлі <input>. Потім використовуйте display: noneна своєму <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

Найкращим способом є використання псевдоелемента: after або: before як елемент перекриття вводу de. Потім стилізуйте цей псевдоелемент за вашим бажанням. Я рекомендую вам зробити загальний стиль для всіх вхідних файлів наступним чином:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

Найкращий спосіб, який я знайшов, - це input type: fileвстановити його тоді display: none. Дайте його id. Створіть кнопку або будь-який інший елемент, який потрібно відкрити вхідним файлом.

Потім додайте на нього слухача події (кнопку), який при натисканні імітує клацання на вихідний файл. Як натискання кнопки з назвою привіт, але вона відкриває вікно файлу.

Приклад коду

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

Css тут може багато зробити ... з невеликою хитрістю ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: довідка :: http://site-o-matic.net/?viewpost=19

-без

Я знайшов дуже простий спосіб переключити кнопку файлу на зображення. Ви просто позначте зображення і помістіть його поверх кнопки файлу.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Натискаючи на мічене зображення, ви вибираєте кнопку файлу.

Тільки такий підхід дає вам всю гнучкість! ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

Це приховує кнопку вхідного файлу, але під кришкою натискає на неї з іншої звичайної кнопки, що ви, очевидно, можете мати стиль, як і будь-яка інша кнопка. Це єдине рішення, яке не має ніяких недоліків, крім марного вузла DOM. Завдяки display:none;кнопці введення не зберігається видимий простір у DOM.

(Я вже не знаю, кому подавати реквізити для цього. Але я зрозумів це десь тут, на Стакковерф.)