Come molte persone, mi piacerebbe personalizzare il brutto input type=filee so che non può essere fatto senza alcuni hack e / o javascript. Ma il fatto è che nel mio caso i pulsanti di caricamento del file servono solo per caricare immagini ( jpeg | jpg | png | gif ), quindi mi chiedevo se potessi usare un'immagine " clickable" che agisca esattamente come un file di input ( mostra la finestra di dialogo e lo stesso $ _FILE nella pagina inviata).
Ho trovato qualche soluzione alternativa qui , e anche questa interessante (ma non funziona su Chrome = /).

Cosa fate quando volete aggiungere un po 'di stile ai pulsanti dei file? Se hai un punto di vista al riguardo, premi il pulsante di risposta;)

Questo funziona davvero bene per me:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>

Fondamentalmente l' attributo for dell'etichetta fa in modo che fare clic sull'etichetta equivale a fare clic sull'input specificato .

Inoltre, la proprietà display impostata su none fa in modo che l'input del file non venga reso affatto, nascondendolo bello e pulito.

Testato in Chrome ma secondo il web dovrebbe funzionare su tutti i principali browser. :)

EDIT: aggiunto JSFiddle qui: https://jsfiddle.net/c5s42vdz/

In realtà può essere fatto in puro css ed è abbastanza facile ...

Codice HTML

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

Stili CSS

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

L'idea è di posizionare l'input assolutamente all'interno della tua etichetta. imposta la dimensione del carattere dell'input su qualcosa di grande, che aumenterà la dimensione del pulsante "sfoglia". Sono quindi necessari alcuni tentativi ed errori utilizzando le proprietà negative a sinistra / in alto per posizionare il pulsante di selezione dell'input dietro l'etichetta.

Quando posizioni il pulsante, imposta l'alfabeto su 1. Quando hai finito, riportalo a 0 (così puoi vedere cosa stai facendo!)

Assicurati di eseguire il test su tutti i browser perché renderanno tutti il ​​pulsante di input di dimensioni leggermente diverse.

Ottima soluzione di @hardsetting, ma ho apportato alcuni miglioramenti per farlo funzionare con Safari (5.1.7) in Windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

Ho usato visibility: hidden, width:0al posto di display: noneper il rilascio di safari e ha aggiunto pointer-events: nonenel imgtag per farlo lavorare se il tipo di file di input tag è in tag FORM.

Sembra funzionare per me in tutti i principali browser.

Spero che aiuti qualcuno.

Vorrei usare SWFUpload o Uploadify . Hanno bisogno di Flash ma fanno tutto quello che vuoi senza problemi.

Qualsiasi <input type="file">soluzione alternativa basata che tenti di attivare la finestra di dialogo "Apri file" con mezzi diversi dal clic sul controllo effettivo può essere rimossa dai browser in qualsiasi momento per motivi di sicurezza. (Penso che nelle versioni attuali di FF e IE non sia più possibile attivare quell'evento a livello di programmazione.)

Questo è il mio metodo se ho capito il tuo punto

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

è davvero semplice puoi provare questo:

$("#image id").click(function(){
    $("#input id").click();
});

Puoi invece mettere un'immagine e farlo in questo modo:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : In IE9 e IE10 se si attiva l'onclick in un file immesso tramite javascript, il modulo viene contrassegnato come "pericoloso" e non può essere immesso con javascript, non so se può essere inviato tradizionalmente.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

ESEGUI SNIPPET o copia semplicemente il codice sopra ed esegui. Otterrai quello che volevi. Molto semplice ed efficace senza javascript. Godere!!!

L'input stesso è nascosto con visibilità CSS: nascosto.

Quindi puoi avere qualsiasi elemento tu voglia - ancoraggio o immagine .., quando si fa clic sull'ancora / immagine, attivare un clic sul campo di input nascosto - apparirà la finestra di dialogo per la selezione di un file.

EDIT: In realtà funziona in Chrome e Safari, ho appena notato che non è il caso di FF4Beta

Codice di lavoro:

basta nascondere la parte di input e fare così.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

Ho avuto molti problemi con input nascosti e non visibili negli ultimi dieci anni, a volte le cose sono molto più semplici di quanto pensiamo.

Ho avuto un piccolo desiderio con IE 5,6,7,8 e 9 per non supportare l'opacità e quindi l'input del file coprirebbe l'immagine di caricamento, tuttavia il seguente codice CSS ha risolto il problema.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

Il seguente frammento è stato testato su Chrome, IE 5,6,7,8,9,10 l'unico problema in IE 5 è che non supporta il margine automatico.

Esegui lo snippet semplicemente copia e incolla il CSS e l'HTML modifica la dimensione come preferisci.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>