Jak stylizujesz type="file"przycisk wprowadzania ?

Styl wprowadzania danych wejściowych plików jest niezwykle trudny, ponieważ większość przeglądarek nie zmieni wyglądu zarówno z CSS, jak i javascript.

Nawet rozmiar danych wejściowych nie będzie odpowiadał:

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

Zamiast tego musisz użyć atrybutu size:

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

W przypadku każdego bardziej zaawansowanego stylu (np. Zmiana wyglądu przycisku przeglądania) należy przyjrzeć się podstępnemu podejściu polegającemu na nakładaniu stylowego przycisku i pola wprowadzania na natywny plik wejściowy. Artykuł wspomniany już przez rm na www.quirksmode.org/dom/inputfile.html jest najlepszym, jaki widziałem.

AKTUALIZACJA

Chociaż trudno jest <input>bezpośrednio stylizować znacznik, jest to łatwo możliwe za pomocą <label>znacznika. Zobacz odpowiedź poniżej z @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Nie potrzebujesz do tego JavaScript! Oto rozwiązanie dla różnych przeglądarek:

Zobacz ten przykład! - Działa w Chrome / FF / IE - (IE10 / 9/8/7)

Najlepszym rozwiązaniem byłoby posiadanie niestandardowego elementu etykiety z foratrybutem dołączonego do ukrytego elementu wejściowego pliku. (Aby foratrybut iddziałał , atrybut etykiety musi pasować do elementu pliku ).

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

Alternatywnie można również po prostu owinąć element wejściowy pliku etykietą bezpośrednio: (przykład)

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

Jeśli chodzi o styl, po prostu ukryj ¹ element wejściowy za pomocą selektora atrybutów .

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

Następnie wszystko, co musisz zrobić, to styl niestandardowego labelelementu. (przykład) .

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

¹ - Warto zauważyć, że jeśli ukryjesz element za pomocą display: none, nie będzie działał w IE8 i niższych. Należy również pamiętać, że jQuery nie sprawdza domyślnie ukrytych pól . Jeśli jedna z tych rzeczy jest dla Ciebie problemem, oto dwie różne metody ukrywania danych wejściowych ( 1 , 2 ), które działają w takich okolicznościach.

wykonaj następujące kroki, aby utworzyć niestandardowe style formularza przesyłania plików:

1. to jest prosty formularz HTML (proszę przeczytać komentarze HTML, które napisałem tutaj poniżej)

   <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. następnie użyj tego prostego skryptu, aby przekazać zdarzenie click do znacznika wejściowego pliku.

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

   Teraz możesz używać dowolnego rodzaju stylizacji bez obawy o zmianę domyślnych stylów.

Wiem to bardzo dobrze, ponieważ od półtora miesiąca próbuję zmienić domyślne style. uwierz mi, to bardzo trudne, ponieważ różne przeglądarki mają różne znaczniki wejściowe przesyłania. Użyj tego, aby zbudować niestandardowe formularze przesyłania plików. Oto pełny kod AUTOMATYCZNEGO PRZESYŁANIA.

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>

Ukryj go za pomocą css i użyj niestandardowego przycisku za pomocą $ (selektor). Kliknij (), aby aktywować przycisk przeglądania. następnie ustaw interwał, aby sprawdzić wartość typu pliku wejściowego. interwał może wyświetlać wartość dla użytkownika, aby użytkownik mógł zobaczyć, co jest przesyłane. interwał zniknie po przesłaniu formularza [EDYCJA] Przepraszam, że byłem bardzo zajęty chciałem zaktualizować ten post, oto przykład

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

Możesz osiągnąć swoje cele również bez jQuery z normalnym JavaScript.

Teraz newBtn łączy się z html_btn i możesz stylizować swój nowy btn tak, jak chcesz: D

Wszystkie silniki renderujące automatycznie generują przycisk po <input type="file">utworzeniu. Historycznie ten przycisk był całkowicie nie do stylizacji. Jednak Trident i WebKit dodały haki do pseudoelementów.

Trójząb

Począwszy od IE10, przycisk wprowadzania pliku może być stylizowany za pomocą ::-ms-browsepseudoelementu. Zasadniczo wszelkie reguły CSS, które stosujesz do zwykłego przycisku, można zastosować do pseudoelementu. Na przykład:

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

<input type="file">

W IE10 na Windows 8 wyświetla się to następująco:

WebKit

WebKit zapewnia zaczep dla przycisku wprowadzania pliku z ::-webkit-file-upload-buttonpseudoelementem. Ponownie, można zastosować prawie każdą regułę CSS, dlatego też przykład Trident będzie tutaj działał:

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

<input type="file">

W Chrome 26 na OS X wyświetla się to w następujący sposób:

Jeśli używasz Bootstrap 3, działało to dla mnie:

Zobacz http://www.abeautifulsite.net/whipping-file-inputs-into-shape-w--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>

Który tworzy następujący przycisk wprowadzania pliku:

Poważnie, sprawdź http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Przykład działania tutaj z natywną obsługą przeciągania i upuszczania: https://jsfiddle.net/j40xvkb3/

Podczas stylizowania wejścia pliku nie należy przerywać żadnej natywnej interakcji, jaką zapewnia wejście .

The display: nonePodejście zrywa rodzimą przeciągnij i upuść.

Aby niczego nie złamać, powinieneś użyć opacity: 0 metodę wprowadzania danych i ustawić ją za pomocą wzorca względnego / bezwzględnego w opakowaniu.

Korzystając z tej techniki, możesz z łatwością stylizować strefę kliknięcia / upuszczenia dla użytkownika i dodać niestandardową klasę w języku JavaScript do dragenterzdarzenia, aby zaktualizować style i przekazać użytkownikowi informację zwrotną, aby mógł zobaczyć, że może upuścić plik.

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

Oto działający przykład (z dodatkowym JS do obsługi dragoverzdarzeń i upuszczanych plików).

https://jsfiddle.net/j40xvkb3/

Mam nadzieję, że to pomogło!

Jestem w stanie to zrobić z czystym CSS, używając poniższego kodu. Użyłem bootstrap i niesamowitej czcionki.

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

Możesz owinąć swój typ wejściowy = „plik” wewnątrz etykiety dla danych wejściowych. Nadaj styl dowolną etykietę i ukryj dane wejściowe za pomocą display: none;

Oto rozwiązanie, które tak naprawdę nie stylizuje <input type="file" />elementu, ale zamiast tego używa <input type="file" />elementu na wierzchu innych elementów (które można stylizować). The<input type="file" />Element nie jest bardzo widoczny stąd, całkowita iluzja jest ładnie stylizowany kontroli przesyłania plików.

Ostatnio natknąłem się na ten problem i pomimo mnóstwa odpowiedzi na Stack Overflow, żadne z nich naprawdę nie pasowało do rachunku. Ostatecznie dostosowałem to tak, aby uzyskać proste i eleganckie rozwiązanie.

Przetestowałem to również na Firefox, IE (11, 10 i 9), Chrome i Opera, iPad i kilka urządzeń z Androidem.

Oto link 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>

Mam nadzieję że to pomoże!!!

Jest to proste dzięki jquery. Aby podać kodowy przykład sugestii Ryana z niewielką modyfikacją.

Podstawowy HTML:

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

Pamiętaj, aby ustawić styl na wejściu, gdy będziesz gotowy: opacity: 0 nie możesz ustawić, display: noneponieważ musi być klikalny. Ale możesz ustawić go pod przyciskiem „nowy” lub schować pod czymś innym z indeksem Z, jeśli wolisz.

Skonfiguruj trochę jquery, aby kliknąć prawdziwe wejście po kliknięciu obrazu.

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

Teraz twój przycisk działa. Po prostu wytnij i wklej wartość po zmianie.

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

Tah dah! Może być konieczne przetworzenie wartości val () na coś bardziej znaczącego, ale wszystko powinno być ustawione.

Umieść przycisk przesyłania pliku na swoim ładnym przycisku lub elemencie i ukryj go.

Bardzo prosty i działa na dowolnej przeglądarce

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

Style

.upload-wrap {
    position: relative;
}

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

WIDOCZNOŚĆ: ukryta sztuczka

Zwykle wybieram visibility:hiddenlewę

to jest mój przycisk w stylu

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

jest to przycisk typu wejściowego = plik. Zwróć uwagę na visibility:hiddenzasadę

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

jest to bit JavaScript, aby je skleić. To działa

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

jedynym sposobem, jaki mogę wymyślić, jest znalezienie przycisku z javascript po jego renderowaniu i przypisanie mu stylu

możesz także spojrzeć na ten opis

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

Zwykle używałbym prostego javascript do dostosowania znacznika wejściowego pliku. Ukryte pole wejściowe, po kliknięciu przycisku, wywołanie ukrytego pola javascript, proste rozwiązanie bez żadnego css lub wiązki jquery.

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

Tutaj używamy zakresu do wyzwalania danych wejściowych pliku typu i po prostu dostosowujemy ten zakres , abyśmy mogli dodać dowolną stylizację w ten sposób.

Zauważ , że używamy tagu wejściowego z opcją widoczności: ukryty i uruchamiamy go w zakresie.

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

Odniesienie

To dobry sposób na zrobienie tego z przesyłaniem plików / plików kątowych. Możesz zrobić to samo z przyciskiem ładowania początkowego.

Uwaga: Użyłem <a>zamiast <button>tego pozwala, aby zdarzenia kliknięcia się w górę.

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

TYLKO CSS

Użyj tego bardzo prostego i ŁATWEGO

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

Może dużo napowietrzaczy. Ale podoba mi się to w czystym CSS z przyciskami 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"/>

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

Nie daj się zwieść „świetnym” rozwiązaniom opartym wyłącznie na CSS, które w rzeczywistości są bardzo specyficzne dla przeglądarki lub które nakładają stylizowany przycisk na prawdziwy przycisk, lub które zmuszają cię do użycia <label>zamiast hakera <button>lub jakiegokolwiek innego takiego hacka . JavaScript jest niezbędny, aby działał do ogólnego użytku. Sprawdź, jak robią to Gmail i DropZone, jeśli mi nie wierzysz.

Wystarczy zaprojektować zwykły przycisk, jak chcesz, a następnie wywołać prostą funkcję JS, aby utworzyć ukryty element wejściowy i połączyć go ze stylizowanym przyciskiem.

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

Zwróć uwagę, jak powyższy kod ponownie łączy go po każdym wybraniu pliku przez użytkownika. Jest to ważne, ponieważ „onchange” jest wywoływany tylko wtedy, gdy użytkownik zmieni nazwę pliku. Ale prawdopodobnie chcesz pobrać plik za każdym razem, gdy użytkownik go udostępni.

Rozwiązanie wielu plików ze skonwertowaną nazwą pliku

PRZYKŁAD Bootstrap

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 z 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 bez 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;
  });
});

Oto rozwiązanie, które pokazuje również wybraną nazwę pliku: 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; }

W tym tygodniu musiałem również dostosować przycisk i wyświetlić na bok wybraną nazwę pliku, więc po przeczytaniu niektórych odpowiedzi powyżej (Dzięki BTW) wpadłem na następującą implementację:

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 (kątowy)

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

        $scope.fileName = 'No file chosen';

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

Zasadniczo pracuję z biblioteką do przesyłania plików ng, pod kątem kątowym wiążę nazwę pliku z moim $ scope i nadając mu początkową wartość „Nie wybrano pliku”, wiążę również funkcję onFileSelect () z mój zakres, więc kiedy plik zostanie wybrany, otrzymuję nazwę pliku za pomocą interfejsu API ng-upload i przypisuję ją do $ scope.filename.

Po prostu symuluj kliknięcie <input>, używając trigger()funkcji po kliknięciu stylu <div>. Utworzyłem własny przycisk z, <div>a następnie uruchomiłem kliknięcie inputpo kliknięciu mojego <div>. Umożliwia to utworzenie przycisku w dowolny sposób, ponieważ jest to <div>i symuluje kliknięcie pliku <input>. Następnie użyj display: nonena swoim <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");
});

Najlepszym sposobem jest użycie pseudoelementu: za lub: przed, jako element nad wejściem de. Następnie styl ten pseudo element, jak chcesz. Zalecam wykonanie ogólnego stylu dla wszystkich plików wejściowych w następujący sposób:

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

Najlepszym sposobem, jaki znalazłem, jest input type: fileustawienie go na display: none. Daj toid . Utwórz przycisk lub inny element, który chcesz otworzyć wejście pliku.

Następnie dodaj do niego detektor zdarzeń (przycisk), który po kliknięciu symuluje kliknięcie oryginalnego pliku wejściowego. Jak kliknięcie przycisku o nazwie hello, ale otwiera okno pliku.

Przykładowy kod

//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 może tutaj wiele zrobić ... z odrobiną oszustwa ...

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

:: odniesienie :: http://site-o-matic.net/?viewpost=19

-opactwo

Znalazłem bardzo łatwą metodę zmiany przycisku pliku na zdjęcie. Po prostu oznacz zdjęcie i umieść je na przycisku pliku.

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

Klikając oznaczony obraz, wybierasz przycisk pliku.

Tylko takie podejście zapewnia pełną elastyczność! 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();
});

Ukrywa to przycisk pliku wejściowego, ale pod maską klika go inny zwykły przycisk, który można oczywiście stylizować jak każdy inny przycisk. Jest to jedyne rozwiązanie bez wad oprócz bezużytecznego węzła DOM. Dzięki temu display:none;przycisk wejścia nie rezerwuje żadnej widocznej przestrzeni w DOM.

(Nie wiem już, komu dać za to rekwizyty. Ale wpadłem na ten pomysł gdzieś tutaj na Stackoverflow.)