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

<input type="file" value="Browse" name="avatar" id="id_avatar" />

Traté de modificar el value, pero no funciona. ¿Cómo personalizar el texto del botón?

Use Bootstrap FileStyle , que se usa para aplicar estilo a los campos de archivo de los formularios. Es un complemento para una biblioteca de componentes basada en jQuery llamada Twitter Bootstrap

Uso de la muestra:

Incluir:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Vía JavaScript:

$(":file").filestyle();

Vía atributos de datos:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">

En su lugar, puede poner una imagen y hacerlo así:

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 : en IE9 e IE10 si activa onClick en una entrada de archivo a través de javascript, el formulario se marcará como 'peligroso' y no se puede enviar con javascript, no estoy seguro de si se puede enviar tradicionalmente.

Ocultar la entrada del archivo. Cree una nueva entrada para capturar un evento de clic y reenvíelo a la entrada oculta:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

El texto "subir archivo ..." está predefinido por el navegador y no se puede cambiar. La única forma de evitar esto es usar un componente de carga basado en Flash o Java como swfupload .

Funciona perfectamente en todos los navegadores Espero que también funcione para usted.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Cambia content: 'Select some files';con el texto que quieras dentro''

SI NO FUNCIONA CON Firefox, use esto en lugar de entrada:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

Este es un complemento de JQuery para cambiar el texto del botón de un elemento de archivo de entrada.

HTML de ejemplo:

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

Ejemplo JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Resultado:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

más http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Simplemente

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Editar con fragmento]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

Creo que esto es lo que quieres:

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

EDITAR : ahora veo por los comentarios que está preguntando sobre el texto del botón, y no sobre la ruta del archivo. Culpa mía. Dejaré mi respuesta original a continuación en caso de que alguien que se tope con esta pregunta la interprete de la manera en que lo hice originalmente.

2nd EDIT : había borrado esta respuesta porque decidí que no entendía la pregunta y mi respuesta no era relevante. Sin embargo, los comentarios en otra respuesta indicaron que la gente todavía quería ver esta respuesta, así que la estoy recuperando.

MI RESPUESTA ORIGINAL (pensé que el OP estaba preguntando sobre la ruta, no el texto del botón):

Esta no es una característica compatible por razones de seguridad . El navegador web Opera solía admitir esto, pero se eliminó. Piense en lo que sería posible si esto fuera compatible; Puede hacer una página con una entrada de carga de archivos, rellenarla previamente con una ruta a algún archivo confidencial y luego enviar automáticamente el formulario usando javascript activado por el onloadevento. Esto sucedería demasiado rápido para que el usuario haga algo al respecto.

Usar <label>para el subtítulo

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

Esto funciona sin javascript . Puede decorar la etiqueta a cualquier grado de complejidad, al contenido de su corazón. Cuando hace clic en la etiqueta, el clic se redirige automáticamente a la entrada del archivo. La entrada del archivo en sí puede hacerse invisible por cualquier método. Si desea que la etiqueta aparezca como un botón, hay muchas soluciones, por ejemplo:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Solo clases CSS y bootstrap

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>

1. Antes de eso <input type="file">, agregue una imagen y <input style="position:absolute">ocupará el espacio de<input type="file">

2. Use el siguiente CSS para el elemento de archivo

   position:relative;  
   opacity:0;  
   z-index:99;

si usa rieles y tiene problemas para aplicarlo, me gustaría agregar algunos consejos de la respuesta original publicada por @Fernando Kosh

• Descargue el archivo zip y copie el archivo bootstrap-filestyle.min.js ke folder app / assets / javascripts /

• abra su application.js y agregue esta línea a continuación

  // = requiere bootstrap-filestyle.min

• abre tu café y agrega esta línea

  $ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Su texto aquí", icono: falso});

Simplemente puede agregar algún truco css. usted no necesita javascript archivos de entrada o más y sigo atributo de valor existente . solo necesita agregar css . Puedes probar esta solución.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }

<input type="file" class="btn-file-upload" value="Uploadfile" />

Aquí hay una manera de "cambiar" el texto de una entrada con tipo de archivo, con HTML puro y JavaScript:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

para mí no funciona el texto personalizado con bootstrap-filestyle . Ayuda con la decoración del botón, pero es extraño cambiar el texto, antes de comenzar a luchar con css, intento lo siguiente:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle representa el componente como span con una clase llamada butonText, por lo que cuando se carga el documento, simplemente cambie el texto. derecho fácil y debe funcionar en todos los navegadores.

salud

Lo hice así para mi proyecto:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

Esta es una solución alternativa que puede ser de ayuda para usted. Esto oculta el texto que aparece fuera del botón, mezclándolo con el color de fondo del div. Luego puedes darle al div un título que te guste.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>