file - hat - ¿Cambiar el texto predeterminado en el tipo de entrada="archivo"?
manual de navisworks en español pdf (13)
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>
Quiero cambiar el texto predeterminado en el botón que es " Choose File " cuando usamos input="file" .
¿Cómo puedo hacer esto? También 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?
Actualización 2017:
He investigado cómo se podría 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 oculta la entrada con CSS:
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
Luego, diseñe la etiqueta:
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
Entonces, 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 leyó el tutorial y descargó la demostración, es realmente bueno.
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>
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 "tipo de" hacks que puede intentar si quiere una solución html / css lugar de una solución Flash o silverlight .
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.appelsiini.net/projects/filestyle
Personalmente, como la mayoría de los usuarios se apegan a su navegador preferido 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 se trate). .
Déjame agregar un truco que utilicé. Quería tener una sección que te 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 terminaba (sin la función 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.
De acuerdo, es una forma muy sencilla de crear un archivo de entrada personalizado.
Usa etiquetas, pero como sabes de respuestas anteriores, la etiqueta no invoca la función de hacer clic 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 debes hacer es darle un estilo a la etiqueta para que luzca como quieres que
.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 para 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ás notado que tengo la misma clase en mi etiqueta que en mi campo de entrada, es porque quiero que ambos tengan el mismo estilo, por lo tanto, donde sea que hagas clic en la etiqueta, en realidad estás haciendo clic en lo invisible campo de entrada.
Esto debería funcionar:
entrada. className :: - webkit-file-upload-button { style content .. }
Esto podría ayudar a alguien en el futuro, puede darle un estilo a la etiqueta de la entrada que desee y colocar lo que desee dentro y ocultar la entrada con ninguna pantalla.
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">
Hice un guión y lo publiqué en GitHub: get selectFile.js Fácil de usar, siéntete libre de 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
No es posible. De lo contrario, es posible que necesite usar el control de carga de Silverlight o Flash.
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>
Usaría un button para activar la 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
Use el atributo "for" de la label para input .
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>