Como você estiliza um type="file"botão de entrada ?

As entradas de arquivo de estilo são notoriamente difíceis, pois a maioria dos navegadores não altera a aparência de CSS ou javascript.

Mesmo o tamanho da entrada não responderá aos gostos de:

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

Em vez disso, você precisará usar o atributo size:

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

Para qualquer estilo mais sofisticado do que isso (por exemplo, alterando a aparência do botão de navegação), será necessário observar a abordagem complicada de sobrepor um botão estilizado e uma caixa de entrada sobre a entrada do arquivo nativo. O artigo já mencionado por rm em www.quirksmode.org/dom/inputfile.html é o melhor que eu já vi.

ATUALIZAR

Embora seja difícil estilizar uma <input>tag diretamente, isso é facilmente possível com a ajuda de uma <label>tag. Veja a resposta abaixo de @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Você não precisa de JavaScript para isso! Aqui está uma solução para vários navegadores:

Veja este exemplo! - Funciona no Chrome / FF / IE - (IE10 / 9/8/7)

A melhor abordagem seria ter um elemento de rótulo personalizado com um foratributo anexado a um elemento de entrada de arquivo oculto . (O foratributo do rótulo deve corresponder ao elemento do arquivo idpara que isso funcione).

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

Como alternativa, você também pode envolver o elemento de entrada do arquivo diretamente com um rótulo: (exemplo)

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

Em termos de estilo, oculte ¹ o elemento de entrada usando o seletor de atributos .

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

Então, tudo que você precisa fazer é estilizar o labelelemento personalizado . (exemplo) .

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

¹ - Vale a pena notar que, se você ocultar o elemento display: none, ele não funcionará no IE8 e abaixo. Também esteja ciente do fato de que o jQuery validate não valida campos ocultos por padrão. Se um desses problemas for um problema para você, aqui estão dois métodos diferentes para ocultar a entrada ( 1 , 2 ) que funciona nessas circunstâncias.

siga estas etapas e crie estilos personalizados para o formulário de upload de arquivos:

1. este é o formulário HTML simples (leia os comentários em HTML que escrevi aqui abaixo)

   <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. use esse script simples para passar o evento click para a tag de entrada do arquivo.

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

   Agora você pode usar qualquer tipo de estilo sem se preocupar em alterar os estilos padrão.

Sei muito bem disso, porque tenho tentado alterar os estilos padrão há um mês e meio. acredite, é muito difícil porque navegadores diferentes têm tags de entrada de upload diferentes. Portanto, use este para criar seus formulários de upload de arquivos personalizados. Aqui está o código completo do UPLOAD AUTOMATIZADO.

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>

Oculte-o com css e use um botão personalizado com $ (seletor) .click () para ativar o botão de navegação. em seguida, defina um intervalo para verificar o valor do tipo de entrada do arquivo. o intervalo pode exibir o valor para o usuário, para que ele possa ver o que está sendo carregado. o intervalo será limpo quando o formulário for enviado [EDIT] Desculpe, eu tenho estado muito ocupado tentando atualizar esta postagem, aqui está um exemplo

<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

Violino : http://jsfiddle.net/M7BXC/

Você também pode alcançar seus objetivos sem o jQuery com JavaScript normal.

Agora o newBtn está vinculado ao html_btn e você pode estilizar seu novo btn como quiser: D

Todos os mecanismos de renderização geram automaticamente um botão quando um <input type="file">é criado. Historicamente, esse botão não tem estilo. No entanto, Trident e WebKit adicionaram ganchos através de pseudo-elementos.

Tridente

No IE10, o botão de entrada do arquivo pode ser estilizado usando o ::-ms-browsepseudoelemento. Basicamente, qualquer regra CSS aplicada a um botão regular pode ser aplicada ao pseudoelemento. Por exemplo:

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

<input type="file">

Isso é exibido da seguinte maneira no IE10 no Windows 8:

WebKit

O WebKit fornece um gancho para o botão de entrada de arquivo com o ::-webkit-file-upload-buttonpseudoelemento. Novamente, praticamente qualquer regra CSS pode ser aplicada; portanto, o exemplo Trident também funcionará aqui:

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

<input type="file">

Isso é exibido da seguinte maneira no Chrome 26 no OS X:

Se você estiver usando o Bootstrap 3, isso funcionou para mim:

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

Que produz o seguinte botão de entrada de arquivo:

Sério, confira http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Exemplo de trabalho aqui com suporte nativo ao arrastar e soltar: https://jsfiddle.net/j40xvkb3/

Ao estilizar uma entrada de arquivo, você não deve interromper nenhuma interação nativa fornecida pela entrada .

A display: noneabordagem quebra o suporte nativo de arrastar e soltar.

Para não quebrar nada, você deve usar o opacity: 0 abordagem da entrada e posicioná-la usando o padrão relativo / absoluto em um wrapper.

Usando essa técnica, você pode facilmente estilizar uma zona de clique / soltar para o usuário e adicionar classe personalizada em javascript no dragenterevento para atualizar estilos e fornecer um feedback ao usuário para permitir que ele veja que ele pode soltar um arquivo.

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

Aqui está um exemplo prático (com JS adicional para manipular dragoverarquivos de eventos e descartados)

https://jsfiddle.net/j40xvkb3/

Espero que isso tenha ajudado!

Eu sou capaz de fazê-lo com CSS puro usando o código abaixo. Eu usei bootstrap e fonte-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>

Você pode agrupar seu input type = "file" dentro de um rótulo para a entrada. Estilize o rótulo da maneira que desejar e oculte a entrada com display: none;

Aqui está uma solução que realmente não estiliza o <input type="file" />elemento, mas usa um <input type="file" />elemento em cima de outros elementos (que podem ser estilizados). O <input type="file" />elemento não é realmente visível, portanto, a ilusão geral é de um controle de upload de arquivo com estilo.

Me deparei com esse problema recentemente e, apesar da infinidade de respostas no Stack Overflow, nenhuma parecia realmente se encaixar. No final, acabei personalizando isso para ter uma solução simples e elegante.

Também testei isso no Firefox, IE (11, 10 e 9), Chrome e Opera, iPad e alguns dispositivos Android.

Aqui está o link do 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>

Espero que isto ajude!!!

Isso é simples com o jquery. Para dar um exemplo de código da sugestão de Ryan com uma pequena modificação.

HTML básico:

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

Certifique-se de definir o estilo na entrada quando estiver pronto: opacity: 0 você não pode definir display: noneporque precisa ser clicável. Mas você pode posicioná-lo sob o botão "novo" ou dobrá-lo sob outra coisa com o z-index, se preferir.

Configure algum jquery para clicar na entrada real quando você clicar na imagem.

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

Agora seu botão está funcionando. Basta cortar e colar o valor quando alterado.

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

Tah dah! Pode ser necessário analisar o val () para algo mais significativo, mas você deve estar pronto.

Coloque o botão de upload de arquivo sobre seu botão ou elemento legal e oculte-o.

Muito simples e funcionará em qualquer navegador

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

Estilos

.upload-wrap {
    position: relative;
}

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

VISIBILIDADE: truque oculto

Eu costumo seguir o visibility:hiddentruque

este é o meu botão estilizado

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

este é o tipo de entrada = botão de arquivo. Observe a visibility:hiddenregra

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

este é o bit JavaScript para colá-los juntos. Funciona

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

a única maneira de pensar é encontrar o botão com javascript depois que ele é renderizado e atribuir um estilo a ele

você também pode olhar para este artigo

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

Eu normalmente usaria javascript simples para personalizar a tag de entrada do arquivo. Um campo de entrada oculto, ao clicar no botão, o javascript chama o campo oculto, solução simples sem qualquer css ou monte de jquery.

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

Aqui usamos um período para acionar a entrada do tipo de arquivo e simplesmente personalizamos esse período , para que possamos adicionar qualquer estilo dessa maneira.

Observe que usamos a tag de entrada com a opção visibilidade: oculta e a acionamos no período.

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

Referência

É uma ótima maneira de fazer isso com o upload de material / arquivo angular. Você pode fazer o mesmo com um botão de inicialização.

Observe que eu usei, em <a>vez <button>disso, permite que os eventos de clique borbulhem.

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

SOMENTE CSS

Use isso muito simples e fácil

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

Talvez muitos awnsers. Mas eu gosto disso em CSS puro com botões 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/

Não se deixe enganar por "ótimas" soluções somente CSS que são realmente muito específicas do navegador ou que sobrepõem o botão estilizado na parte superior do botão real ou que o forçam a usar um em <label>vez de um<button> ou qualquer outro tipo de hack . É necessário JavaScript para fazê-lo funcionar para uso geral. Por favor, estude como o Gmail e o DropZone fazem isso, se você não acredita em mim.

Apenas estilize um botão normal como desejar e, em seguida, chame uma função JS simples para criar e vincular um elemento de entrada oculto ao seu botão estilizado.

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

Observe como o código acima o vincula novamente após cada vez que o usuário escolhe um arquivo. Isso é importante porque "onchange" é chamado apenas se o usuário alterar o nome do arquivo. Mas você provavelmente deseja obter o arquivo sempre que o usuário o fornecer.

Solução de vários arquivos com nome de arquivo convertido

EXEMPLO de inicialização

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

Aqui está uma solução que também mostra o nome do arquivo escolhido: 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; }

Nesta semana, eu também precisei personalizar o botão e exibir o nome do arquivo selecionado ao lado, então, depois de ler algumas das respostas acima (Obrigado, BTW), criei a seguinte implementação:

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

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

        $scope.fileName = 'No file chosen';

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

Basicamente, estou trabalhando com a lib ng-file-upload, no sentido angular, vinculo o nome do arquivo ao meu $ scope e fornecendo o valor inicial de 'Nenhum arquivo escolhido', também vinculo a função onFileSelect () a meu escopo; assim, quando um arquivo é selecionado, estou obtendo o nome do arquivo usando a API ng-upload e atribuindo-o ao $ scope.filename.

Simplesmente simule um clique <input>usando a trigger()função ao clicar em um estilo <div>. Criei meu próprio botão a partir de um <div>e, em seguida, iniciei um clique no inputquando clico em meu <div>. Isso permite que você crie seu botão da maneira que desejar, porque é um <div>e simula um clique no seu arquivo <input>. Então use display: noneno seu <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");
});

A melhor maneira é usar o pseudo-elemento: after ou: before como um elemento visível na entrada de. Em seguida, estilize esse pseudo elemento como desejar. Eu recomendo que você faça como um estilo geral para todos os arquivos de entrada da seguinte maneira:

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

A melhor maneira que eu encontrei é tendo uma input type: fileconfiguração para display: none. Dê um id. Crie um botão ou qualquer outro elemento que você deseja abrir a entrada do arquivo.

Em seguida, adicione um ouvinte de evento (botão) que, quando clicado, simula um clique na entrada do arquivo original. Como clicar em um botão chamado hello, mas abre uma janela de arquivo.

Código de exemplo

//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")
    })

o CSS pode fazer muito aqui ... com um pouco de truque ...

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

:: referência :: http://site-o-matic.net/?viewpost=19

-Mosteiro

Encontrei um método muito fácil de alternar o botão de arquivo para uma imagem. Você apenas rotula uma imagem e a coloca em cima do botão de arquivo.

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

Ao clicar na imagem rotulada, você seleciona o botão do arquivo.

Somente essa abordagem oferece toda a flexibilidade! 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();
});

Isso oculta o botão do arquivo de entrada, mas, sob o capô, ele clica em outro botão normal, que você pode obviamente usar como qualquer outro botão. Esta é a única solução sem desvantagens além de um nó DOM inútil. Graças a display:none;, o botão de entrada não reserva nenhum espaço visível no DOM.

(Não sei mais a quem dar suporte para isso. Mas recebi essa ideia de algum lugar aqui no Stackoverflow.)