personalizzare il pulsante del file per il caricamento dell'immagine

Ho inserito un pulsante per caricare i file di immagine. Desidero personalizzare quel pulsante, voglio aggiungere più di un file immagine, qual è la logica per ottenere.personalizzare il pulsante del file per il caricamento dell'immagine

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

E 'possibile personalizzare il testo "no files choosen" al di sotto della choose button.Meanwile i saggi da tenere d'immagine della telecamera prima del testo no files choosen.

Come eseguire questo per migliorare il mio sito.

Grazie

fonte

2013-04-18 Anonymous

Il post simile http://stackoverflow.com/questions/6461252/custom-upload-button – zavg

È possibile nascondere l'input da mettendolo in un div che è height:0px e overwflow:hidden. Allora aggiungi un pulsante o un altro elemento html che puoi modellare come vuoi. Nel caso in onclick si ottiene il campo di ingresso utilizzando JavaScript o jQuery e clic su di esso:

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="fileInput" name="fileInput" /> 
</div> 
<button type="button" onclick="chooseFile();">choose file</button> 

<script> 
    function chooseFile() { 
     $("#fileInput").click(); 
    } 
</script>

Ora l'ingresso è nascosto, ma è possibile lo stile il pulsante che si desidera, sarà sempre aprire il file di input al clic.

Se non si desidera utilizzare jQuery sostituire il tag script con questo tag script:

<script> 
    function chooseFile() { 
     document.getElementById("fileInput").click(); 
    } 
</script>

fonte

2013-04-18 10:48:50

Ciao signore, l'ho controllato con jsfiddle, non sta prendendo il file di input. Il file di file non ha fatto nulla. –

Sì, perché devi aggiungere collegamenti a e jQuery js-files. –

E devi inserire il javascript in un tag di script nel pannello html, ma non so perché ... Nel provare l'editor di w3schools va bene. –

Prova questa soluzione manipolata. (Ho provato oggi per uno dei mio progetto :))

HTML

<div class="choose_file"> 
     <span>Choose File</span> 
     <input name="Select File" type="file" /> 
    </div>

CSS

.choose_file{ 
    position:relative; 
    display:inline-block;  
    border-radius:8px; 
    border:#ebebeb solid 1px; 
    width:250px; 
    padding: 4px 6px 4px 8px; 
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif; 
    color: #7f7f7f; 
    margin-top: 2px; 
    background:white 
} 
.choose_file input[type="file"]{ 
    -webkit-appearance:none; 
    position:absolute; 
    top:0; left:0; 
    opacity:0; 
}

DEMO

fonte

2013-04-18 10:37:41 Sowmya

non mostra il file selezionato nome – msa7

è possibile personalizzarla utilizzando solo i CSS. Vai attraverso il link qui sotto.

HTML

<label class="btn-upload"> 
    <input type="file" name="fileupload"> 
    <button class="btn">Browse</button> 
</label> 

.btn-upload { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 
.btn-upload input[type=file] { 
    position: absolute; 
    opacity: 0; 
    z-index: 0; 
    max-width: 100%; 
    height: 100%; 
    display: block; 
} 
.btn-upload .btn{ 
    padding: 8px 20px; 
    background: #337ab7; 
    border: 1px solid #2e6da4; 
    color: #fff; 
    border: 0; 
} 
.btn-upload:hover .btn{ 
    padding: 8px 20px; 
    background: #2e6da4; 
    color: #fff; 
    border: 0; 
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

fonte

2015-08-15 19:29:43

<body> 

    <style> 
    .image{ 
    position:relative; 
    display:inline-block;  
    width:3%; 
    padding: 0%; 
    } 
.image input[type="file"]{ 
-webkit-appearance:none; 
position:absolute; 
    top:0; left:0; 
    opacity:0; 
    } 
    </style> 

    <div class="image"> 
    <span><img src='admin/ico/fms.ico' class "image"></span> 
    <input name="image" type="file" /> 
    </div> 
</body>

fonte

2017-02-12 15:46:40

Per favore aggiungi del testo _how_ questo risponde alla domanda. – Zeta

questo codice funziona meglio quando si desidera utilizzare un'immagine come pulsante di caricamento. basta sostituire la mia immagine con la tua e funzionerà –

Per favore [modifica] ulteriori informazioni nella tua risposta. I commenti possono essere cancellati e il loro contenuto può andare perso. – Zeta

personalizzare il pulsante del file per il caricamento dell'immagine

risposta

Problemi correlati