input type = pulsante mostra solo file

154

C'è un modo per stile (o script) <input type=file />elemento per avere visibile solo il pulsante "Sfoglia" senza campo di testo?

Grazie

Modifica : solo per chiarire il motivo per cui ho bisogno di questo. Sto usando il codice di caricamento di più file da http://www.morningz.com/?p=5 e non ha bisogno del campo di testo di input perché non ha mai valore. Lo script aggiunge semplicemente il file appena selezionato alla raccolta sulla pagina. Sarebbe molto meglio senza campo di testo, se possibile.

javascript html css

— Andrija
fonte

169

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

Questo funzionerà sicuramente, l'ho usato nei miei progetti. Spero che questo aiuti :)

— shiba
fonte

1

Questa risposta è così semplice ed elegante e ha funzionato per tutti i browser.

— Mike.C.Ford

Questa è di gran lunga la migliore soluzione che ho trovato. Elimina alcuni comportamenti stravaganti di stile di input di file con diversi browser mobili. Ora il mio controllo di input del file non si distingue come un pollice dolente con il resto del mio layout. Grazie mille, vorrei poter votare più di 1.

— Highdown

... e aggiungi onchange = "this.form.submit ();" nell'elemento File di input per iniziare il caricamento dopo la selezione del file. Non dimenticare di avvolgere tutti gli elementi con il tag Modulo.

— Tomas,

1

Questo non funzionerà in IE8 e versioni precedenti poiché quando si invia il modulo verrà visualizzato un errore Accesso negato (non è possibile attivare input di file con js in IE8 e versioni precedenti per "motivi di sicurezza")

— unenthusiasticuser,

3

@unenthusiasticuser è corretto e non funziona in ipad per lo stesso motivo di sicurezza. :)

— Mahi

80

Avevo un sacco di tempo cercando di ottenere questo risultato. Non volevo usare una soluzione Flash e nessuna delle librerie jQuery che ho visto era affidabile su tutti i browser.

Mi è venuta in mente la mia soluzione, che è implementata completamente in CSS (ad eccezione della modifica dello stile onclick per far apparire il pulsante "cliccato").

Puoi provare un esempio funzionante qui: http://jsfiddle.net/VQJ9V/307/ (testato in FF 7, IE 9, Safari 5, Opera 11 e Chrome 14)

Funziona creando un input di file di grandi dimensioni (con dimensione del carattere: 50px), quindi avvolgendolo in un div che ha una dimensione fissa e overflow: nascosto. L'input è quindi visibile solo attraverso questa div "finestra". Al div può essere data un'immagine o un colore di sfondo, il testo può essere aggiunto e l'input può essere reso trasparente per rivelare lo sfondo 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)
}

Fammi sapere se ci sono problemi e proverò a risolverli.

— ampersandre
fonte

4

questa è stata la migliore soluzione che ho trovato che ha funzionato con tutti i browser

— Fatal

2

Tu sei l'uomo. Sono stato alle prese con questo problema su FF e la tua soluzione è l'unica che funziona davvero, specialmente con pulsanti più grandi aumentando la sua area attiva usando "font-size". Grazie! :)

— jpincheira,

2

Eccellente senza usare alcun copione

— Bujji,

1

Twitter lo fa ma era un po 'contorto rispetto a questo. Funziona bene per me!

— volume uno

buona soluzione! Solo una domanda: perché non dai a .fileInput una larghezza del 100% e imposta la larghezza di .inputWrapper su auto?

— luin,

52

Ho sprecato la mia giornata oggi per farlo funzionare. Ho trovato nessuna delle soluzioni qui lavorando ciascuno dei miei scenari.

Poi mi sono ricordato di aver visto un esempio del caricamento del file JQuery senza casella di testo. Quindi quello che ho fatto è che ho preso il loro esempio e l'ho ridotto alla parte pertinente.

Questa soluzione funziona almeno per IE e FF e può essere completamente disegnata. Nell'esempio seguente l'input del file è nascosto sotto il pulsante "Aggiungi file".

<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

La parte importante è che l'overflow del contenitore è impostato su nascosto.

— Maxim V. Pavlov,

1

Questo ha funzionato assolutamente per me almeno su IE e Chrome. Grazie :)

— Kevin Dark,

1

larghezza del bordo: 0 0 100px 200px; ha funzionato anche per me in IE e Chrome. Grazie.

— Paul

2

Se avessi posto la domanda originale, avrei avuto la decenza di contrassegnarla come risposta. Grazie.

— Mark Rendle

Una risposta migliore è di seguito. Usa un'etichetta, nascondi l'input. Funziona alla grande!

— Gman,

25

Nascondi l'elemento del file di input e crea un pulsante visibile che attiverà l'evento click di quel file di input.

Prova questo:

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

Ho creato un plug-in jQuery che fa tutto ciò che funziona per te: github.com/mbitto/jquery.buttonFile

— Manuel Bitto

Questo non funziona nelle versioni più recenti di IE. Il clic indiretto provoca IE per capovolgere e negare l'accesso. È fastidioso.

— Andrew

20

Nascondi il tag del file di input con css, aggiungi un'etichetta e assegnalo al pulsante di input. l'etichetta sarà cliccabile e quando si fa clic, si aprirà la finestra di dialogo del file.

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

Aggiungi lo stile all'etichetta come pulsante.
Dimostrazione dal vivo

— Suresh Pattu
fonte

1

Funziona bene su Safari oggi 4 febbraio 2015

— gman

Questa potrebbe essere la risposta più semplice e migliore. Vorrei anche aggiungere un onchangegestore al inputper consentire ad alcuni codici JS di raccogliere le informazioni sul file caricato.

— David R Tribble,

16

Sarà molto difficile. Il problema con il tipo di input del file è che di solito è costituito da due elementi visivi, mentre viene trattato come un singolo elemento DOM. Aggiungete a ciò che diversi browser hanno il loro aspetto distinto per l'input del file e siete pronti per l'incubo. Vedi questo articolo su quirksmode.org sulle stranezze che ha l'input del file. Ti garantisco che non ti renderà felice (parlo per esperienza).

[MODIFICARE]

In realtà, penso che potresti cavartela inserendo il tuo input in un elemento container (come un div) e aggiungendo un margine negativo all'elemento. Nascondere efficacemente la parte della casella di testo fuori dallo schermo. Un'altra opzione sarebbe quella di utilizzare la tecnica nell'articolo che ho collegato, per provare a modellarla come un pulsante.

— Erik van Brakel
fonte

4

Quell'articolo su quirksmode è fantastico. Lo styling degli input dei file è comunque un problema. : P

— MitMaro,

Non credo che il margine netagive contenuto funzionerà bene se si prendono in considerazione diversi stili di browser e le dimensioni minime dei caratteri sono diverse da utente a utente.

— joebert,

1

joebert: Sono d'accordo, penso che l'opzione migliore sia ancora la tecnica mostrata nell'articolo quirksmode, quanto dolorosamente hacker ...

— Erik van Brakel,

14

Risolto il problema con tutti i browser RISOLTO:

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

Ho testato in FF, Chrome e IE - funzionando bene, anche stili applicati: D

— Javier Reyes
fonte

6

Sono abbastanza sicuro che non funziona su un numero intero di browser (inclusi FF e IE, quando ho eseguito l'ultimo test) - l'unico browser su cui ricordo che stava lavorando era Chrome.

— Herman Schaaf,

Funziona solo con jQuery, ma non è una soluzione autonoma.

— Solenoide,

3

Questo sembra funzionare (visualizza il menu di selezione dei file), ma quando il modulo viene inviato, il file non viene inviato in FireFox e IE, per motivi di sicurezza.

— commerciale

13

Ho cercato di implementare le prime due soluzioni e alla fine è stata una GRANDE perdita di tempo per me. Alla fine, l'applicazione di questa classe .css ha risolto il problema ...

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

Fatto! super pulito e super semplice ...

— nikotromus
fonte

1

Questo è un ottimo metodo!

— Kaow

9

Un altro modo semplice per farlo. Crea un tag "input type file" in html e nascondilo. Quindi fare clic su un pulsante e formattarlo in base alle esigenze. Successivamente, utilizzare javascript / jquery per fare clic a livello di codice sul tag di input quando si fa clic sul pulsante.

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

Ecco un violino JS funzionante per lo stesso: - http://jsfiddle.net/32na3/

— divyenduz
fonte

2

Questa è una soluzione pulita ma non riesco a farlo funzionare in Chrome. Apparentemente neanche gli altri. Opera e Chrome non consentono di fare clic sul file del tipo di input per motivi di sicurezza. Qui si possono trovare maggiori informazioni su questo e una soluzione che ha funzionato per me: stackoverflow.com/a/3030174/2650732

— wojjas

Quando ho scritto questa risposta, ha funzionato su Chrome. Grazie per avermelo fatto sapere, aggiornerò di conseguenza la mia risposta

— divyenduz,

7

Ho usato un po 'del codice consigliato sopra e dopo molte ore di rinunciare al mio tempo, alla fine sono arrivato a una soluzione gratuita di borsa CSS.

Puoi eseguirlo qui - http://jsfiddle.net/WqGph/

ma poi ho trovato una soluzione migliore - 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

Il problema è che l' onchangeevento non è attivato per l' inputelemento nascosto .

— David R Tribble

6

Ecco il mio buon vecchio rimedio:

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

Almeno ha funzionato in Safari.

Chiaro e semplice.

— Zooza S
fonte

4

È possibile etichettare un'immagine in modo che quando si fa clic su di essa verrà attivato l'evento di clic del pulsante. Puoi semplicemente rendere invisibile il normale pulsante:

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

Ha funzionato per me su tutti i browser ed è molto facile da usare.

— D-Inventore
fonte

4

Puoi inviare l'evento click su un input di file nascosto come questo:

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

Espandi frammento

— jiang min
fonte

var ev = document.createEvent('HTMLEvents'); cambia HTMLEvents in MouseEventsvar ev = document.createEvent('MouseEvents');

— jiang min

Bene grazie! Ho convertito il tuo post in uno snippet di codice eseguibile e ho cambiato HtmlEvents in 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();
        });
 });

Spero che funzioni :)

— Anoop saju
fonte

4

Puoi dare all'elemento di input un'opacità del font pari a 0. Ciò nasconderà il campo di testo senza nascondere il pulsante "Scegli file".

Nessun javascript richiesto, cancella il browser fino a IE 9

Per esempio,

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

— nicholmen
fonte

3

Ho una soluzione davvero confusa con questo ...

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

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

Il problema è che l'attributo di larghezza che nasconde il campo di testo varierà ovviamente tra i browser, vari tra i temi di Windows XP e così via. Forse è qualcosa con cui puoi lavorare? ...

Anche questo non funzionerà su IE6, il browser non capisce i selettori di attributi.

— Adrian Godong,

3

So che questo è un vecchio post, ma un modo semplice per far sparire il testo è solo quello di impostare il colore del testo su quello del tuo sfondo.

ad es. se lo sfondo per l'inserimento del testo è bianco, allora:

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

Ciò non influirà sul testo Scegli file che sarà comunque nero a causa del browser.

— Keleko
fonte

1

Nel caso in cui un utente faccia clic su tale porzione, verrà aperto il popup di caricamento.

— Praveen,

3

Questo funziona per me:

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

— novizio
fonte

2

la mia soluzione è solo quella di impostarlo all'interno di un div come "druveen" ha detto, tuttavia annuncio il mio stile pulsante per il div (farlo sembrare un pulsante con un: hover) e ho semplicemente impostato lo stile "opacità: 0;" all'ingresso. Fa un incanto per me, spero che faccia lo stesso per te.

— ThomasG
fonte

2

Ho appena disegnato un file di input con larghezza: 85px e il campo di testo è scomparso del tutto

Quindi il campo di testo è scomparso o no? "affatto" potrebbe implicare una negazione lì, ma la tua grammatica è difettosa (e quindi ambigua).

— Kirk Woll,

2

Questo codice HTML mostra solo il pulsante Carica 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

Ti preghiamo di considerare di aggiungere alcune informazioni contestuali alla tua risposta che descrivono cosa fa lo snippet di codice.

— 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

Per me, il modo più semplice è usare un colore di carattere come il colore di sfondo. Semplice, non elegante, ma utile.

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

1

Quindi, ecco il modo migliore per farlo PER TUTTI I BROWSER:

Dimentica 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

QUESTO NON FUNZIONA IN SAFARI ... poiché non consentirà .trigger ('click') per motivi di sicurezza:? per farlo funzionare in Safari creare dinamicamente il pulsante file e aggiungerlo nuovamente quando viene caricato di nuovo

— user1965301

1

Tutte queste risposte sono carine, ma CSS non funzionerà poiché non è la stessa su tutti i browser e dispositivi, la prima risposta che ho scritto funzionerà in tutto tranne Safari. Per farlo funzionare su tutti i browser in ogni momento, deve essere creato in modo dinamico e ricreato ogni volta che si desidera cancellare il testo di input:

    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

La risposta di tmanthey è abbastanza buona, tranne per il fatto che non puoi giocare con la larghezza del bordo in Firefox v20. Se vedi il link (demo, non puoi mostrarlo qui) hanno risolto il problema usando font-size = 23px, transform: translate (-300px, 0px) scale (4) per Firefox per ingrandire il pulsante.

Altre soluzioni che utilizzano .click () su un div diverso sono inutili se si desidera renderlo una casella di input drag'n'drop.

— Balint Karakai
fonte

1

Ci sono diverse opzioni valide qui, ma ho pensato di dare quello che ho escogitato mentre cercavo di risolvere un problema simile. 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

Risolto con il seguente codice:

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

— druveen
fonte

1

Ho scritto questo:

<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();" />

Espandi frammento

Funziona bene in tutti i browser, senza jQuery, senza CSS.

— MadMaxIII
fonte

1

Ecco una versione semplificata della popolare soluzione di @ ampersandre che funziona in tutti i principali browser. Markup 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" />

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

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

Utilizza un trigger di clic "UploadButton" nascosto per il postback del server con standard. Il testo con "Carica file" sposta il controllo di input fuori dalla vista nel div wrapper quando trabocca, quindi non è necessario applicare alcuno stile per il controllo div "input file". Il selettore $ ([id $ = "FileInput"]) consente la sezione di ID con prefissi ASP.NET standard applicati. Il valore della casella di testo FilePath è impostato dal codice del server dietro a hdnFileName.Value una volta caricato il file.

— Dan Randolph
fonte