Come si modella un type="file"pulsante di input ?

Lo styling degli input dei file è notoriamente difficile, poiché la maggior parte dei browser non cambierà l'aspetto né da CSS né da JavaScript.

Anche la dimensione dell'input non risponderà a simili di:

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

Invece, dovrai usare l'attributo size:

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

Per uno stile più sofisticato di quello (ad esempio cambiando l'aspetto del pulsante Sfoglia) dovrai guardare l'approccio complicato di sovrapporre un pulsante con stile e una casella di input sopra l'input del file nativo. L'articolo già citato da rm su www.quirksmode.org/dom/inputfile.html è il migliore che abbia mai visto.

AGGIORNARE

Sebbene sia difficile <input>definire direttamente un tag, questo è facilmente possibile con l'aiuto di un <label>tag. Vedi la risposta di seguito da @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Non hai bisogno di JavaScript per questo! Ecco una soluzione cross-browser:

Vedi questo esempio!- Funziona in Chrome / FF / IE - (IE10 / 9/8/7)

L'approccio migliore sarebbe quello di avere un elemento etichetta personalizzato con un forattributo collegato a un elemento di input di file nascosto . ( Per poter funzionare, l' forattributo dell'etichetta deve corrispondere a quello dell'elemento file id).

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

In alternativa, puoi anche avvolgere direttamente l'elemento di input del file con un'etichetta: (esempio)

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

In termini di stile, basta nascondere ¹ l'elemento di input usando il selettore di attributi .

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

Quindi tutto ciò che devi fare è dare uno stile labelall'elemento personalizzato . (esempio) .

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

¹ - Vale la pena notare che se si nasconde l'elemento usando display: none, non funzionerà in IE8 e sotto. Inoltre, tieni presente che jQuery validate non convalida i campi nascosti per impostazione predefinita. Se una di queste cose è un problema per te, qui ci sono due diversi metodi per nascondere l'input ( 1 , 2 ) che funziona in queste circostanze.

segui questi passaggi quindi puoi creare stili personalizzati per il tuo modulo di caricamento file:

1. questo è il semplice modulo HTML (leggi i commenti HTML che ho scritto qui sotto)

   <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. quindi utilizza questo semplice script per passare l'evento click al file tag di input.

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

   Ora puoi utilizzare qualsiasi tipo di stile senza preoccuparti di come modificare gli stili predefiniti.

Lo so molto bene perché ho cercato di cambiare gli stili predefiniti per un mese e mezzo. credimi, è molto difficile perché browser diversi hanno tag di input di caricamento diversi. Quindi usa questo per creare i tuoi moduli di caricamento file personalizzati. Ecco il codice di CARICAMENTO AUTOMATICO completo.

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>

Nascondilo con CSS e usa un pulsante personalizzato con $ (selettore) .click () per attivare il pulsante Sfoglia. quindi impostare un intervallo per verificare il valore del tipo di input del file. l'intervallo può visualizzare il valore per l'utente in modo che l'utente possa vedere cosa viene caricato. l'intervallo verrà cancellato quando viene inviato il modulo [EDIT] Spiacente, sono stato molto impegnato, intendevo aggiornare questo post, ecco un esempio

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

Puoi raggiungere anche i tuoi obiettivi senza jQuery con JavaScript normale.

Ora newBtn è collegato a html_btn e puoi modellare il tuo nuovo btn come desideri: D

Tutti i motori di rendering generano automaticamente un pulsante quando <input type="file">viene creato. Storicamente, quel pulsante è stato completamente fuori moda. Tuttavia, Trident e WebKit hanno aggiunto hook tramite pseudo-elementi.

Tridente

A partire da IE10, il pulsante di input del file può essere disegnato usando lo ::-ms-browsepseudo-elemento. Fondamentalmente, qualsiasi regola CSS che si applica a un pulsante normale può essere applicata allo pseudo-elemento. Per esempio:

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

<input type="file">

Viene visualizzato come segue in IE10 su Windows 8:

WebKit

WebKit fornisce un hook per il pulsante di input del file con lo ::-webkit-file-upload-buttonpseudo-elemento. Ancora una volta, è possibile applicare praticamente qualsiasi regola CSS, quindi l'esempio Trident funzionerà anche qui:

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

<input type="file">

Viene visualizzato come segue in Chrome 26 su OS X:

Se stai usando Bootstrap 3, questo ha funzionato per me:

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

Che produce il seguente pulsante di input del file:

Seriamente, controlla http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Esempio di lavoro qui con supporto nativo per trascinamento della selezione: https://jsfiddle.net/j40xvkb3/

Durante lo styling di un input di file, non è necessario interrompere alcuna interazione nativa fornita dall'input .

L' display: noneapproccio interrompe il supporto nativo di trascinamento della selezione.

Per non rompere nulla, dovresti usare il opacity: 0 approccio per l'input e posizionarlo utilizzando il modello relativo / assoluto in un wrapper.

Usando questa tecnica, puoi facilmente definire una zona click / drop per l'utente e aggiungere una classe personalizzata in javascript su dragenterevento per aggiornare gli stili e fornire all'utente un feedback per fargli vedere che può rilasciare un file.

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

Ecco un esempio funzionante (con JS aggiuntivo per gestire i dragoverfile di eventi e eliminati).

https://jsfiddle.net/j40xvkb3/

Spero che questo abbia aiutato!

Sono in grado di farlo con CSS puro utilizzando il codice seguente. Ho usato bootstrap e font-awesome.

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

Puoi inserire il tuo input type = "file" all'interno di un'etichetta per l'input. Modella l'etichetta come preferisci e nascondi l'input con display: none;

Ecco una soluzione che non disegna realmente l' <input type="file" />elemento, ma usa invece un <input type="file" />elemento sopra altri elementi (che può essere disegnato). Il<input type="file" /> elemento non è realmente visibile, quindi, l'illusione generale è di un controllo del caricamento dei file ben disegnato.

Ho riscontrato questo problema di recente e nonostante la pletora di risposte su Stack Overflow, nessuno sembrava davvero adatto al conto. Alla fine, ho finito per personalizzare questo in modo da avere una soluzione semplice ed elegante.

Ho anche testato questo su Firefox, IE (11, 10 e 9), Chrome e Opera, iPad e alcuni dispositivi Android.

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

Spero che sia di aiuto!!!

Questo è semplice con jquery. Per dare un esempio di codice di Ryan suggerimento con una leggera modifica.

HTML di base:

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

Assicurati di impostare lo stile sull'input quando sei pronto: opacity: 0 non puoi impostaredisplay: none perché deve essere selezionabile. Ma puoi posizionarlo sotto il pulsante "nuovo" o infilare sotto qualcos'altro con z-index se preferisci.

Imposta alcuni jquery per fare clic sull'input reale quando fai clic sull'immagine.

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

Ora il tuo pulsante funziona. Basta tagliare e incollare il valore quando viene modificato.

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

Tah dah! Potrebbe essere necessario analizzare val () in qualcosa di più significativo, ma dovresti essere pronto.

Metti il ​​pulsante di caricamento del file sul tuo bel pulsante o elemento e nascondilo.

Molto semplice e funzionerà su qualsiasi browser

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

stili

.upload-wrap {
    position: relative;
}

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

VISIBILITÀ: TRUCCO nascosto

Di solito vado per il visibility:hiddentrucco

questo è il mio pulsante in stile

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

questo è il tipo di input = pulsante file. Nota la visibility:hiddenregola

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

questo è il bit JavaScript per incollarli insieme. Funziona

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

l'unico modo a cui riesco a pensare è trovare il pulsante con javascript dopo che è stato reso e assegnargli uno stile

potresti anche dare un'occhiata a questo commento

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

Normalmente userei javascript semplice per personalizzare il tag di input del file. Un campo di input nascosto, facendo clic sul pulsante, javascript chiama il campo nascosto, soluzione semplice senza alcun CSS o mazzo di jquery.

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

Qui usiamo un intervallo per attivare l'input del file di tipo e semplicemente lo abbiamo personalizzato , in modo da poter aggiungere qualsiasi stile in questo modo.

Si noti che utilizziamo il tag di input con visibilità: opzione nascosta e attiviamolo nell'intervallo.

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

Riferimento

Questo è un bel modo per farlo con il caricamento di file materiale / angolare. Puoi fare lo stesso con un pulsante bootstrap.

Nota che ho usato <a>invece di <button>questo consente agli eventi di clic di fare il bubble up.

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

SOLO CSS

Usa questo molto semplice e FACILE

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

Forse un sacco di tendalini. Ma mi piace questo in puro CSS con pulsanti 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/

Non lasciarti ingannare da "grandi" soluzioni solo CSS che sono in realtà molto specifiche per browser, o che sovrappongono il pulsante con stile sopra il pulsante reale, o che ti costringono a usare un <label>invece di un <button>, o qualsiasi altro simile hack . JavaScript è necessario per farlo funzionare per uso generale. Per favore studia come lo fanno gmail e DropZone se non mi credi.

Disegna semplicemente un pulsante normale come preferisci, quindi chiama una semplice funzione JS per creare e collegare un elemento di input nascosto al tuo pulsante con stile.

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

Nota come il codice sopra riportato lo ricollega ogni volta che l'utente sceglie un file. Questo è importante perché "onchange" viene chiamato solo se l'utente cambia il nome file. Ma probabilmente vuoi ottenere il file ogni volta che l'utente lo fornisce.

Soluzione a più file con nome file convertito

Bootstrap ESEMPIO

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

Ecco una soluzione che mostra anche il nome del file scelto: 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; }

Questa settimana ho anche dovuto personalizzare il pulsante e visualizzare il nome del file selezionato a parte, quindi dopo aver letto alcune delle risposte sopra (Grazie BTW) ho trovato la seguente implementazione:

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 (angolare)

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

        $scope.fileName = 'No file chosen';

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

Fondamentalmente sto lavorando con lib di ng-file-upload, angolarmente-saggio sto legando il nome del file al mio $ scope e dandogli il valore iniziale di 'Nessun file scelto', sto anche legando la funzione onFileSelect () a il mio ambito quindi quando un file viene selezionato ottengo il nome file usando l'API ng-upload e lo assegno al $ scope.filename.

Simula semplicemente un clic sul <input>usando la trigger()funzione quando fai clic su uno stile <div>. Ho creato il mio pulsante da un <div>e quindi attivato un clic sul inputquando si fa clic su my <div>. Ciò ti consente di creare il tuo pulsante come preferisci perché è a <div>e simula un clic sul tuo file <input>. Quindi utilizzare display: nonesul tuo <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");
});

Il modo migliore è usare lo pseudo elemento: after o: before come elemento overt il de input. Quindi disegna lo pseudo elemento come desideri. Ti consiglio di fare come stile generale per tutti i file di input come segue:

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

Il modo migliore che ho trovato è di input type: fileimpostarlo su display: none. Dagli unid . Crea un pulsante o qualsiasi altro elemento che desideri aprire l'input del file.

Quindi aggiungere un listener di eventi su di esso (pulsante) che, quando si fa clic, simula un clic sull'input del file originale. Come fare clic su un pulsante chiamato ciao ma si apre una finestra di file.

Codice di esempio

//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 può fare molto qui ... con un po 'di inganno ...

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

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

-abbazia

Ho trovato un metodo molto semplice per cambiare il pulsante file in un'immagine. Basta etichettare un'immagine e posizionarla sopra il pulsante file.

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

Quando si fa clic sull'immagine etichettata, si seleziona il pulsante file.

Solo questo approccio ti dà tutta la flessibilità! 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();
});

Ciò nasconde il pulsante del file di input, ma sotto il cofano lo fa clic da un altro pulsante normale, che puoi ovviamente stile come qualsiasi altro pulsante. Questa è l'unica soluzione senza svantaggio a parte un inutile nodo DOM. Grazie a display:none;, il pulsante di input non riserva spazio visibile nel DOM.

(Non so più a chi dare oggetti per questo. Ma ho avuto quell'idea da qualche parte qui su StackOverflow.)