¿Cambiar el texto predeterminado en input type = "file"?

183

Quiero cambiar el texto predeterminado en el botón que es " Choose File" cuando lo usamos input="file".

ingrese la descripción de la imagen aquí

¿Cómo puedo hacer esto? Además, como puede ver en el botón de imagen, está en el lado izquierdo del texto. ¿Cómo puedo ponerlo en el lado derecho del texto?

html file input default-value Harry Joy
fuente

¿Existe la opción de llevar este texto a variable?

kicaj

1

La respuesta de ParPar aquí es probablemente lo que está buscando: stackoverflow.com/questions/1944267/… .

Aniket Suryavanshi

posible duplicado de ¿Cómo cambiar el nombre del botón "navegar" HTML de un tipo de entrada = archivo? para la parte del texto, para el estilo en general: stackoverflow.com/questions/572768/…

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

Pruebe esta solución: stackoverflow.com/a/30275263/1657573

Michael Tarimo

Posible duplicado de ¿Cómo cambiar el texto del botón de <input type = "file" />?

Bae

49

Cada navegador tiene su propia versión del control y, como tal, no puede cambiar ni el texto ni la orientación del control.

Hay algunos "tipos de" hacks que quizás quieras probar si quieres un html/ /css solución en lugar de un Flash o luz plateadasolución.

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

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

Personalmente, debido a que la mayoría de los usuarios se adhieren a su navegador de elección y, por lo tanto, probablemente están acostumbrados a ver el control en la versión predeterminada, probablemente se confundirían si vieran algo diferente (dependiendo de los tipos de usuarios con los que está tratando) .

Shiv Kumar
fuente

177

Utilice el "for"atributo de labelpara input.

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

A continuación se muestra el código para buscar el nombre del archivo cargado

$("#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>

Expandir fragmento

algometrix
fuente

20

display:nonese puede usar en INPUT para que no use el espacio no necesario.

Maestro DJon

2

Gracias. Esto funcionó perfectamente, y era exactamente lo que estaba buscando.

Chris - Jr

Funciona bien en Mac con Chrome, FF y Safari. Si lo hace también en IE, esta es la mejor y más simple opción para diseñar el botón de entrada de archivo. ¡Gracias!

Pod

55

funciona bien, solo un poco negativo es que el usuario no puede ver el nombre del archivo que se ha seleccionado tras la selección.

luke_mclachlan

2

@ Mike actualizó la publicación para buscar el nombre del archivo

algometrix

29

Creo que esto es lo que quieres:

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

Expandir fragmento

1Cr18Ni9
fuente

27

Esto podría ayudar a alguien en el futuro, puede diseñar la etiqueta para la entrada como desee y poner lo que quiera dentro de ella y ocultar la entrada sin mostrar ninguna.

Funciona perfectamente en 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">

Expandir fragmento

Paulo Mogollón
fuente

1

¡La mejor solución que he encontrado hasta ahora! +1

danyo

7

No es posible. De lo contrario, es posible que deba utilizar Silverlight o el control de carga Flash.

Anuraj
fuente

1

¿Qué no es posible? ¿Cambiar texto o colocar el botón a la derecha o ambos?

Harry Joy

13

Voté esto porque creo que es injusto rechazar esta respuesta. Es básicamente imposible cambiar el texto del botón de entrada del archivo nativo. Las "posibles soluciones" son todos los hacks o soluciones alternativas.

Peter Lee

10

@PeterLee: los hacks son soluciones, algunos incluso siguen las especificaciones del W3C.

Derek 朕會功夫

3

Aquí cómo puedes hacerlo:

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

Código 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
fuente

3

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

Este sigue siendo el mejor hasta ahora.

oroyo segun
fuente

2

Usando Bootstrap puedes hacer esto como el siguiente código.

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

Este código no imprime en la página web qué archivo se eligió.

tale852150

2

Hice un script y lo publiqué en GitHub: get selectFile.js Fácil de usar, no dude en clonar.

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

MANIFESTACIÓN

jsfiddle.net/Thielicious/4oxmsy49/

Thielicious
fuente

2

Actualización 2017:

He investigado cómo se puede lograr esto. Y la mejor explicación / tutorial está aquí: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Escribiré un resumen aquí en caso de que no esté disponible. Entonces deberías tener HTML:

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

Luego, oculte la entrada con CSS:

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

Luego peina la etiqueta:

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

Luego, opcionalmente, puede agregar JS para mostrar el nombre del archivo:

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

Pero realmente solo lea el tutorial y descargue la demostración, es realmente bueno.

usuario3784950
fuente

1

Usaría a buttonpara activar el input:

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

Rápido y limpio.

Sony Santos
fuente

1

Puede utilizar este enfoque, funciona incluso si se ingresan muchos archivos.

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>

Expandir fragmento

Илья Зеленько
fuente

Me gusta este enfoque, pero para mí el texto del archivo seleccionado no aparece, alguna idea de cuál es el problema. Soy Google Chrome

N Khan

1

Esto debería funcionar:

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

Andrius
fuente

1

Así es como se hace con bootstrap, solo debe colocar la entrada original en algún lugar ... idk en la cabeza y eliminar el <br> si lo tiene, porque de todos modos está oculto y ocupa espacio :)

 <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/[email protected]/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>

Expandir fragmento

Leon Tanko
fuente

0

Déjame agregar un truco que usé. Quería tener una sección que le permitiera arrastrar y soltar archivos, y quería que se pudiera hacer clic en esa sección de arrastrar y soltar junto con el botón de carga original.

Así es como se veía cuando terminé (menos la capacidad de arrastrar y soltar, hay muchos tutoriales sobre cómo hacerlo).

Y luego, en realidad, creé una serie de publicaciones de blog que tratan principalmente sobre los botones de carga de archivos.

wp-overwatch.com
fuente

0

Ok, así que es una forma muy simple de css puro de crear su archivo de entrada personalizado.

Use etiquetas, pero como sabe por las respuestas anteriores, la etiqueta no invoca la función onclick en firefox, puede ser un error pero no importa con lo siguiente.

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

Lo que haces es diseñar la etiqueta para que se vea como quieres

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

ahora simplemente oculta el botón de entrada real, pero no puedes configurarlo en visability: hidden

Así que hazlo invisible configurando opacity: 0;

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

ahora, como habrán notado, tengo la misma clase en mi etiqueta que en mi campo de entrada, eso es porque quiero que ambos tengan el mismo estilo, por lo tanto, cada vez que hace clic en la etiqueta, en realidad está haciendo clic en lo invisible campo de entrada.

Jadin Hornsby
fuente

0

Mi solución...

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).");
});

Esto es simplemente malvado: D

bagatov88
fuente

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

Expandir fragmento

Rookive
fuente

¿Cambiar el texto predeterminado en input type = "file"?

Respuestas:

Creo que esto es lo que quieres: