tipo de entrada = arquivo mostra apenas o botão

154

Existe uma maneira de estilizar (ou script) o <input type=file />elemento para ter apenas o botão "Procurar" visível sem o campo de texto?

obrigado

Edit : Apenas para esclarecer por que eu preciso disso. Estou usando o código de upload de vários arquivos em http://www.morningz.com/?p=5 e ele não precisa de um campo de texto porque nunca tem valor. O script apenas adiciona o arquivo recém-selecionado à coleção na página. Ficaria muito melhor sem o campo de texto, se possível.

javascript html css Andrija
fonte

169

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Isso certamente funcionará, eu o usei em meus projetos. Espero que isso ajude :)

shiba
fonte

1

Esta resposta é tão simples e elegante e funcionou para todos os navegadores.

Mike.C.Ford

Esta é de longe a melhor solução que encontrei. Ele elimina algum comportamento real de estilo de entrada de arquivo peculiar com diferentes navegadores móveis. Agora, meu controle de entrada de arquivo não se destaca como um dedão dolorido no restante do meu layout. Muito obrigado, gostaria de poder votar mais de um.

Highdown

... e adicione onchange = "this.form.submit ();" para inserir o elemento Arquivo para iniciar o upload após a seleção do arquivo. Não se esqueça de agrupar todos os elementos com a tag Form.

Tomas

1

Isso não vai funcionar no IE8 e abaixo como quando enviar o formulário você receberá um erro de acesso negado (você não pode entradas de arquivo gatilho com js em IE8 e abaixo por "razões de segurança")

unenthusiasticuser

3

O @unenthusiasticuser corrige e não funciona no ipad pelo mesmo motivo de segurança. :)

Mahi

80

Eu estava passando um bom tempo tentando fazer isso. Eu não queria usar uma solução Flash, e nenhuma das bibliotecas jQuery que eu olhei era confiável em todos os navegadores.

Eu vim com minha própria solução, que é implementada completamente em CSS (exceto a alteração no estilo onclick para fazer o botão aparecer 'clicado').

Você pode tentar um exemplo de trabalho aqui: http://jsfiddle.net/VQJ9V/307/ (Testado no FF 7, IE 9, Safari 5, Opera 11 e Chrome 14)

Ele funciona criando uma entrada de arquivo grande (com tamanho da fonte: 50px) e, em seguida, agrupando-a em uma div que possui um tamanho fixo e o estouro: oculto. A entrada é visível apenas através desta div "janela". A div pode receber uma imagem ou cor de fundo, o texto pode ser adicionado e a entrada pode ser transparente para revelar o fundo da div:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Avise-me se houver algum problema e tentarei corrigi-los.

e comercial
fonte

4

esta foi a melhor solução que me deparei com que trabalhou com todos os navegadores

Fatal

2

Você é o cara. Eu tenho lutado com esse problema no FF e sua solução é a única que realmente funciona, especialmente com botões maiores, aumentando sua área ativa usando "tamanho da fonte". Obrigado! :)

jpincheira

2

Excelente um sem o uso de qualquer script

bujji

1

O Twitter faz isso, mas foi um pouco complicado em comparação com este. Trabalhando bem para mim!

volume one

boa solução! Apenas uma pergunta: por que você não atribui ao .fileInput uma largura de 100% e define a largura do .inputWrapper como automático?

luin 28/01

52

Eu perdi meu dia hoje fazendo isso funcionar. Não encontrei nenhuma das soluções aqui trabalhando em cada um dos meus cenários.

Lembrei-me de que vi um exemplo para o upload de arquivo JQuery sem caixa de texto. Então, o que fiz foi pegar o exemplo deles e reduzi-o à parte relevante.

Esta solução funciona pelo menos para IE e FF e pode ser totalmente estilizada. No exemplo abaixo, a entrada do arquivo está oculta sob o sofisticado botão "Adicionar arquivos".

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>

tmanthey
fonte

4

Parte importante é que o estouro do contêiner está definido como oculto.

Maxim V. Pavlov

1

Isso absolutamente funcionou para mim no IE e no Chrome, pelo menos. Obrigado :)

Kevin Dark

1

largura da borda: 0 0 100px 200px; funcionou para mim também no IE e no Chrome. Obrigado.

Paul

2

Se eu tivesse feito a pergunta original, teria tido a decência de marcar isso como a resposta. Obrigado.

Mark Rendle

Uma resposta melhor está abaixo. Use um rótulo, oculte a entrada. Funciona bem!

gman

25

Oculte o elemento do arquivo de entrada e crie um botão visível que acionará o evento de clique desse arquivo de entrada.

Tente o seguinte:

CSS

#file { width:0; height:0; }

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT (jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

jojo
fonte

Eu criei

Manuel Bitto

Isso não funciona nas versões mais recentes do IE. O clique indireto faz com que o IE desative e negue acesso. É irritante.

Andrew

20

Oculte a tag do arquivo de entrada com css, adicione um rótulo e atribua-o ao botão de entrada. o rótulo será clicável e, quando clicado, acionará a caixa de diálogo do arquivo.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Adicione o estilo ao rótulo como um botão.
Demonstração ao vivo

Suresh Pattu
fonte

1

Hoje funciona bem no Safari 04 de fevereiro de 2015

gman 04/04

Essa pode ser a resposta mais simples e melhor. Eu também adicionaria um onchangemanipulador ao inputpara permitir que algum código JS capturasse as informações do arquivo carregado.

David R Tribble

16

Isso vai ser muito difícil. O problema com o tipo de entrada do arquivo é que ele geralmente consiste em dois elementos visuais, enquanto é tratado como um único elemento DOM. Acrescente a isso que vários navegadores têm sua aparência distinta para a entrada do arquivo e você está pronto para pesadelo. Consulte este artigo em quirksmode.org sobre as peculiaridades que a entrada do arquivo possui. Garanto-lhe que não o fará feliz (falo por experiência própria).

[EDITAR]

Na verdade, acho que você pode se safar colocando sua entrada em um elemento contêiner (como uma div) e adicionando uma margem negativa ao elemento. Ocultar efetivamente a parte da caixa de texto da tela. Outra opção seria usar a técnica no artigo que vinculei, para tentar estilizá-la como um botão.

Erik van Brakel
fonte

4

Esse artigo sobre o modo quirks é ótimo. As entradas de arquivo de estilo ainda são um problema. : P

MitMaro

Eu não acho que a margem líquida de lucro funcione bem depois que você levar em consideração diferentes estilos de navegador e tamanhos mínimos de fonte, sendo diferentes de usuário para usuário.

joebert

1

joebert: Eu concordo, eu acho que a melhor opção ainda é a técnica apresentada no artigo quirksmode, como dolorosamente hackish ...

Erik van Brakel

14

Correção para funcionar em todos os navegadores RESOLVIDO:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

Eu testei em FF, Chrome e IE - funcionando bem, estilos aplicados também: D

Javier Reyes
fonte

6

Tenho certeza de que isso não funciona em um grande número de navegadores (incluindo FF e IE, quando testei pela última vez) - o único navegador em que me lembro de ter trabalhado era o Chrome.

Herman Schaaf

Isso funciona apenas com jQuery, mas não é uma solução independente.

Solenóide

3

Isso parece funcionar (exibe o menu do seletor de arquivos), mas quando o formulário é enviado, o arquivo não é enviado no FireFox e IE, por motivos de segurança.

ampersandre

13

Tentei implementar as duas principais soluções e acabou sendo um enorme desperdício de tempo para mim. No final, a aplicação dessa classe .css resolveu o problema ...

input[type='file'] {
  color: transparent;
}

Feito! super limpo e super simples ...

Nikotromus
fonte

1

Este é um ótimo método!

Kaow

9

Outra maneira fácil de fazer isso. Crie uma tag "input type file" em html e oculte-a. Em seguida, clique em um botão e formate-o de acordo com a necessidade. Depois disso, use javascript / jquery para clicar programaticamente na tag de entrada quando o botão for clicado.

HTML: -

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

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Aqui está um violino JS funcional para o mesmo: - http://jsfiddle.net/32na3/

divyenduz
fonte

2

Esta é uma solução interessante, mas não consigo fazê-la funcionar no Chrome. Aparentemente, outros também não podem. O Opera e o Chrome não permitem clique no arquivo do tipo de entrada por razões de segurança. Aqui você pode encontrar mais informações sobre isso e uma solução que funcionou para mim: stackoverflow.com/a/3030174/2650732

wojjas

Quando escrevi esta resposta, ela funcionava no chrome. Obrigado por me informar, atualizará minha resposta de acordo

divyenduz

7

Eu usei alguns dos códigos recomendados acima e, depois de muitas horas de folga, finalmente cheguei a uma solução gratuita de css bag.

Você pode executá-lo aqui - http://jsfiddle.net/WqGph/

mas depois encontrei uma solução melhor - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

GoreOle
fonte

O problema é que o onchangeevento não é acionado para o inputelemento oculto .

precisa

6

Aqui está o meu bom e velho remédio:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

Pelo menos funcionou no Safari.

Claro e simples.

Zooza S
fonte

4

Você pode rotular uma imagem para que, ao clicar nela, o evento de clique do botão seja acionado. Você pode simplesmente tornar o botão normal invisível:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Funcionou para mim em todos os navegadores e é muito fácil de usar.

D-Inventor
fonte

4

Você pode despachar o evento click em uma entrada de arquivo oculta como esta:

<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;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>

Expandir snippet

jiang min
fonte

var ev = document.createEvent('HTMLEvents'); alterar HTMLEvents para MouseEventsvar ev = document.createEvent('MouseEvents');

jiang min

Bom obrigado! Eu converti seu post para um trecho de código executável e mudou HtmlEvents para MouseEvents

Fabian Schmengler

4

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

JQUERY

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

Espero que isso funcione :)

Anoop saju
fonte

4

Você pode dar ao elemento de entrada uma opacidade de fonte igual a 0. Isso ocultará o campo de texto sem ocultar o botão 'Escolher arquivos'.

Não é necessário javascript, limpe o navegador desde o IE 9

Por exemplo,

input {color: rgba(0, 0, 0, 0);}

nicholmen
fonte

3

Eu tenho uma solução realmente hacky com isso ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

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

O problema é que o atributo de largura que está ocultando o campo de texto variará obviamente entre navegadores, entre temas do Windows XP e assim por diante. Talvez seja algo com o qual você possa trabalhar? ...

fonte

Mesmo que este não funcione no IE6, o navegador não entende os seletores de atributos.

Adrian Godong

3

Eu sei que este é um post antigo, mas uma maneira simples de fazer o texto desaparecer é apenas definir a cor do texto para a do seu plano de fundo.

por exemplo, se o fundo da entrada de texto for branco, então:

input[type="file"]{
color:#fff;
}

Isso não afetará o texto Escolher arquivo, que ainda ficará preto devido ao navegador.

Keleko
fonte

1

No caso de um usuário clicar nessa parte, o pop-up de upload será aberto.

precisa

3

Isso funciona para mim:

input[type="file"]  {
    color: white!important;
}

novato
fonte

2

minha solução é apenas configurá-lo dentro de uma div como "druveen", mas adoro meu próprio estilo de botão à div (faça com que pareça um botão com a: hover) e apenas defino o estilo "opacity: 0;" para a entrada. Funciona um charme para mim, espero que faça o mesmo por você.

ThomasG
fonte

2

Acabei de criar um arquivo de entrada com largura: 85px e o campo de texto desapareceu

fonte

Então o campo de texto desapareceu ou não? "em tudo" pode significar uma negação lá, mas sua gramática é falha (e, portanto, ambígua).

Kirk Woll

2

Este código HTML mostra apenas o botão Upload File

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

Anil Shetty
fonte

1

Considere adicionar algumas informações contextuais à sua resposta, que descrevem o que seu snippet de código faz.

Clijsters

1

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

Somwang Souksavatd
fonte

1

Para mim, a maneira mais simples é usar uma cor de fonte como a cor de fundo. Simples, não elegante, mas útil.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

fonte

1

Então, aqui está a melhor maneira de fazer isso PARA TODOS OS NAVEGADORES:

Esqueça CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>

user1965301
fonte

ISSO NÃO FUNCIONA NO SAFARI ... pois não permite .trigger ('click') por razões de segurança:? para fazê-lo funcionar em safari criar dinamicamente o botão arquivo e re add-lo quando ele é carregado novamente

user1965301

1

Todas essas respostas são engraçadas, mas o CSS não funcionará, pois não é o mesmo em todos os navegadores e dispositivos, a primeira resposta que escrevi funcionará em tudo, menos no Safari. Para que ele funcione em todos os navegadores o tempo todo, ele deve ser criado dinamicamente e recriado sempre que você desejar limpar o texto de entrada:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

user1965301
fonte

1

A resposta do tmanthey é bastante boa, exceto que você não pode brincar com a largura da borda no Firefox v20. Se você vir o link (a demo não pode realmente ser mostrada aqui), eles resolveram o problema usando o tamanho da fonte = 23px, transform: translate (-300px, 0px) scale (4) para que o Firefox aumentasse o botão.

Outras soluções usando .click () em uma div diferente são inúteis se você deseja torná-la uma caixa de entrada arrastar e soltar.

Balint Karakai
fonte

1

Existem várias opções válidas aqui, mas achei que eu daria o que descobri enquanto tentava corrigir um problema semelhante. http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}

Matthew Pautzke
fonte

1

Resolvido com o seguinte código:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

druveen
fonte

1

Eu escrevi isto:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Expandir snippet

Funciona bem em todos os navegadores, sem jQuery, sem CSS.

MadMaxIII
fonte

1

Aqui está uma versão simplificada da solução popular do @ ampersandre que funciona em todos os principais navegadores. Marcação Asp.NET

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

Código JQuery

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

código css

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Usa um gatilho de clique "UploadButton" oculto para postagem do servidor com o padrão. O texto com "Upload File" empurra o controle de entrada para fora da vista na div do wrapper quando ele excede o fluxo, portanto não há necessidade de aplicar nenhum estilo à div do controle "file input". O seletor $ ([id $ = "FileInput"]) permite a seção de identificações com os prefixos padrão do ASP.NET aplicados. O valor da caixa de texto FilePath é definido no código do servidor atrás de hdnFileName.Value após o upload do arquivo.

Dan Randolph
fonte

tipo de entrada = arquivo mostra apenas o botão

Respostas: