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.
Respostas:
<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 :)
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.
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>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();}
);
});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
onchangemanipulador ao inputpara permitir que algum código JS capturasse as informações do arquivo carregado.
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.
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
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 ...
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/
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/>onchangeevento não é acionado para o inputelemento oculto .
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.
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>var ev = document.createEvent('HTMLEvents'); alterar HTMLEvents para MouseEventsvar ev = document.createEvent('MouseEvents');
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 :)
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? ...
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.
Acabei de criar um arquivo de entrada com largura: 85px e o campo de texto desapareceu
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><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;
});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>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>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);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.
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);
}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();" />Funciona bem em todos os navegadores, sem jQuery, sem CSS.
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.