Cambia il testo predefinito in input type = "file"?

183

Voglio cambiare il testo predefinito sul pulsante che è " Choose File" quando lo usiamo input="file".

inserisci qui la descrizione dell'immagine

Come posso fare questo? Inoltre, come puoi vedere nell'immagine, il pulsante si trova sul lato sinistro del testo. Come posso metterlo sul lato destro del testo?

— Harry Joy
fonte

C'è un'opzione per ottenere questo testo su variabile?

— Kicaj,

1

La risposta di ParPar qui è probabilmente ciò che stai cercando: stackoverflow.com/questions/1944267/… .

— Aniket Suryavanshi,

possibile duplicato di Come rinominare il pulsante "sfoglia" HTML di un tipo di input = file? per la parte di testo, per lo stile in generale: stackoverflow.com/questions/572768/...

— Ciro Santilli郝海东冠状病六四事件法轮功

Prova questa soluzione: stackoverflow.com/a/30275263/1657573

— Michael Tarimo,

Possibile duplicato di Come modificare il testo del pulsante di <input type = "file" />?

— Bae

49

Ogni browser ha la propria interpretazione del controllo e come tale non è possibile modificare il testo o l'orientamento del controllo.

Ci sono alcuni "tipi di" hack che potresti voler provare se lo desideri html/css soluzione piuttosto che un Flash o silverlightsoluzione.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Personalmente, poiché la maggior parte degli utenti si attacca al proprio browser preferito e quindi è probabilmente abituato a vedere il controllo nella rappresentazione predefinita, probabilmente si confonderebbero se vedessero qualcosa di diverso (a seconda del tipo di utenti con cui hai a che fare) .

— Shiv Kumar
fonte

177

Usa l' "for"attributo di labelper input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

Di seguito è riportato il codice per recuperare il nome del file caricato

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>

Espandi frammento

— algometrix
fonte

20

display:nonepuò essere utilizzato su INPUT in modo che non utilizzi spazio non necessario.

— Master DJon,

2

Grazie. Funzionava perfettamente ed era esattamente quello che stavo cercando.

— Chris - Jr

Funziona bene su Mac con Chrome, FF e Safari. Se lo fa anche su IE, questa è l'opzione migliore e più semplice per dare uno stile al pulsante di input del file. Grazie!

— Pod

5

funziona bene, solo un piccolo aspetto negativo è che l'utente non può vedere il nome del file che è stato selezionato al momento della selezione.

— luke_mclachlan,

2

@Mike Aggiornato il post per recuperare il nome file

— algometrix

29

Penso che questo sia quello che vuoi:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

Espandi frammento

— 1Cr18Ni9
fonte

27

Questo potrebbe aiutare qualcuno in futuro, puoi modellare l'etichetta per l'input come preferisci e mettere tutto ciò che vuoi al suo interno e nascondere l'input con display none.

Funziona perfettamente su Cordova con iOS

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

Espandi frammento

— Paulo Mogollón
fonte

1

la migliore soluzione che ho trovato finora! +1

— danyo,

7

Non è possibile. In caso contrario, potrebbe essere necessario utilizzare il controllo di caricamento Silverlight o Flash.

— Anuraj
fonte

1

Quale non è possibile? Cambiare testo o posizionare il pulsante a destra o entrambi?

— Harry Joy,

13

Ho votato a favore, perché penso che sia ingiusto sottovalutare questa risposta. È praticamente impossibile cambiare il testo del pulsante di input del file nativo. Le "possibili soluzioni" sono tutti hack o soluzioni alternative.

— Peter Lee,

10

@PeterLee - Gli hack sono soluzioni, alcuni seguono persino le specifiche del W3C.

— Derek 功夫會功夫

3

Ecco come puoi farlo:

jQuery:

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Codice HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

— Tushar Shukla
fonte

3

<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

Questo è ancora il migliore finora

— oroyo segun
fonte

2

Usando Bootstrap puoi fare questa cosa come sotto il codice.

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>

— Rana Aalamgeer
fonte

Questo codice non stampa sulla pagina Web quale file è stato scelto.

— tale852150,

2

Ho realizzato una sceneggiatura e l'ho pubblicata su GitHub: get selectFile.js Facile da usare, sentiti libero di clonare.

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

— Thielicious
fonte

2

Aggiornamento 2017:

Ho fatto ricerche su come raggiungere questo obiettivo. E la migliore spiegazione / tutorial è qui: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Scriverò un riepilogo qui nel caso in cui non fosse disponibile. Quindi dovresti avere HTML:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Quindi nascondi l'input con CSS:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

Quindi dai uno stile all'etichetta:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

Quindi, facoltativamente, puoi aggiungere JS per visualizzare il nome del file:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

Ma davvero basta leggere il tutorial e scaricare la demo, è davvero buono.

— user3784950
fonte

1

Userei a buttonper attivare il input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Veloce e pulito.

— Sony Santos
fonte

1

È possibile utilizzare questo approccio, funziona anche se vengono immessi molti file.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})

.btn-select-file {
  border-radius: 20px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>

Espandi frammento

— Илья Зеленько
fonte

Mi piace questo approccio, ma per me il testo del file selezionato non viene visualizzato, ho idea di quale sia il problema. Sono google chrome

— N Khan,

1

Questo dovrebbe funzionare:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

— Andrius
fonte

1

Ecco come è fatto con bootstrap, solo tu dovresti mettere l'input originale da qualche parte ... idk in testa ed eliminare <br> se ce l'hai, perché è solo nascosto e occupa comunque spazio :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>

Espandi frammento

— Leon Tanko
fonte

0

Vorrei aggiungere un trucco che ho usato. Volevo avere una sezione che ti permettesse di trascinare e rilasciare i file e volevo che quella sezione di trascinamento fosse cliccabile insieme al pulsante di caricamento originale.

Ecco come sembrava quando avevo finito (meno l'abilità di trascinamento della selezione, ci sono molti tutorial su come farlo).

E poi ho effettivamente creato una serie di post sul blog che riguardano principalmente i pulsanti di caricamento dei file.

— wp-overwatch.com
fonte

0

Ok così semplice modo css puro di creare il tuo file di input personalizzato.

Usa le etichette, ma come sai dalle risposte precedenti, l'etichetta non invoca la funzione onclick in firefox, potrebbe essere un bug ma non importa quanto segue.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

Quello che fai è dare uno stile all'etichetta per apparire come vuoi

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

ora nascondi semplicemente il pulsante di input effettivo, ma non puoi impostarlo su visability: hidden

Quindi rendi invisibile impostando opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

ora come avrai notato ho sulla mia etichetta la stessa classe del mio campo di input, perché voglio che entrambi abbiano lo stesso stile, quindi ovunque tu faccia clic sull'etichetta, stai effettivamente facendo clic sull'invisibile Campo di inserimento.

— Jadin Hornsby
fonte

0

La mia soluzione ...

HTML:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

jquery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

Questo è solo un male: D

— bagatov88
fonte

0

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });

.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />

Espandi frammento

— Rokive
fonte