Sostituisci tipo di input = file con un'immagine

Question

Come molte persone, mi piacerebbe personalizzare il brutto tipo di input = file, e so che non può essere fatto senza alcuni hack e/o javascript. Ma, il fatto è che nel mio caso i pulsanti del file di caricamento sono solo per il caricamento delle immagini (jpeg | jpg | png | gif), quindi mi chiedevo se potevo usare un'immagine "cliccabile" che agisse esattamente come un file di tipo input (mostra la finestra di dialogo e lo stesso $ _FILE sulla pagina inviata).
Ho trovato alcuni workaround here e this interesting one troppo (ma non funziona su Chrome = /).

Cosa fate voi ragazzi quando volete aggiungere un tocco di stile ai pulsanti dei file? Se si dispone di un punto di vista su di esso, basta premere il tasto di risposta;)

Answer 1

userei SWFUpload o Uploadify. Hanno bisogno di Flash ma fanno tutto ciò che vuoi senza problemi.

Qualsiasi soluzione basata su <input type="file"> che tenta di attivare la finestra di dialogo "Apri file" con mezzi diversi dal clic sul controllo effettivo potrebbe essere rimossa dai browser per motivi di sicurezza in qualsiasi momento. (I che nelle attuali versioni di FF e IE, non è più possibile per far scattare l'evento a livello di codice.)

Answer 2

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

il 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 è quella di posizionare l'ingresso assolutamente all'interno della vostra etichetta. imposta la dimensione del carattere dell'ingresso su qualcosa di grande, che aumenterà la dimensione del pulsante "sfoglia". Vengono quindi eseguite alcune prove ed errori utilizzando le proprietà negative sinistra/superiore per posizionare il pulsante di ricerca di input dietro l'etichetta.

Quando si posiziona il pulsante, impostare l'alfa a 1. Quando hai finito di impostare di nuovo a 0 (in modo da poter vedere cosa si sta facendo!)

Assicurati di testare tutti i browser, perché' Tutti renderanno il pulsante di input di dimensioni leggermente diverse.

Potete vedere un esempio qui (pulsante Aggiungi Traccia): http://rakmastering.com/upload/

Answer 3

L'ingresso si è nascosto con una visibilità CSS: nascosto.

Quindi è possibile avere qualsiasi elemento desiderato - ancoraggio o immagine .., quando si fa clic sull'immagine di ancoraggio/immagine, attivare un clic sul campo di input nascosto - verrà visualizzata 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 in FF4Beta

Answer 4

Questo funziona molto bene per me:

<div class="image-upload"> 
    <label for="file-input"> 
     <img src="placeholder.jpg"/> 
    </label> 

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

Con la designazione:

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

In pratica l'attributo per dell'etichetta consente di fare in modo che clic sull'etichetta sia uguale a quello di clic g l'ingresso specificato.

Inoltre, la proprietà display impostata su none rende in modo che l'input del file non sia 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/

Answer 5

È possibile inserire un'immagine, invece, e lo fa 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 input tramite javascript il modulo viene contrassegnato come "pericoloso" e non può essere immesso in javascript, non è sicuro che possa essere inviato tradizionalmente.

Answer 6

Codice lavoro:

solo nascondere una parte di ingresso e di fare in questo modo.

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

Answer 7

Questo è il mio metodo se ho ottenuto il vostro punto di

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> 

Answer 8

 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>

RUN SNIPPET o Basta copiare il codice qui sopra ed eseguire. Otterrai quello che volevi. Molto semplice ed efficace senza javascript. Godere!!!

Answer 9

sua davvero semplice si può provare questo:

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

Answer 10

grande soluzione per @hardsetting, Ma ho fatto alcuni miglioramenti per farlo funzionare con Safari (5.1.7) in finestre

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

<div class="image-upload"> 
 
    <label for="file-input"> 
 
    <img src="placeholder.jpg" style="pointer-events: none"/> 
 
    </label> 
 

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

ho usato "visibility: hidden, larghezza: 0" invece di "display: none" per problema di safari e aggiunto "pointer-events: none" nel tag img per farlo funzionare se il tag del tipo di file di input è nel tag FORM. sembra funzionare per me in tutti i principali browser. Spero che aiuti qualcuno.