Pregunta Diseño de un tipo de entrada = botón "archivo"


Cómo darle estilo a la entrada type="file" botón.


512
2018-02-21 10:36


origen


Respuestas:


El estilo de las entradas de archivos es notoriamente difícil, ya que la mayoría de los navegadores no cambiarán la apariencia de css o javascript.

Incluso el tamaño de la entrada no responderá a los gustos de:

<input type="file" style="width:200px">

En su lugar, deberá usar el atributo de tamaño:

<input type="file" size="60" />

Para cualquier estilo más sofisticado que eso (por ejemplo, cambiar el aspecto del botón Examinar) tendrá que ver el enfoque engañoso de superponer un botón de estilo y un cuadro de entrada sobre la entrada del archivo nativo. El artículo ya mencionado por rm en www.quirksmode.org/dom/inputfile.html es el mejor que he visto


157
2018-04-03 16:11



¡No necesitas JavaScript para esto! Aquí hay una solución de navegador cruzado:

Mira este ejemplo! - Funciona en Chrome / FF / IE - (IE10 / 9/8/7)

El mejor enfoque sería tener un elemento de etiqueta personalizado con un for atributo adjunto a una oculto elemento de entrada de archivo. (Las etiquetas for atributo debe coincidir con el elemento del archivo id para que esto funcione).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Como alternativa, también puede envolver el elemento de entrada de archivo con una etiqueta directamente: (ejemplo)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

En términos de estilo, solo esconde1 el elemento de entrada usando el selector de atributo.

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

Entonces todo lo que tienes que hacer es personalizar el estilo label elemento. (ejemplo).

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - Vale la pena señalar que si oculta el elemento usando display: none, no funcionará en IE8 y abajo. También tenga en cuenta el hecho de que jQuery valide no valida campos ocultos por defecto. Si alguna de estas cosas es un problema para usted, aquí hay dos métodos diferentes para ocultar la entrada (1, 2) que funcionan en estas circunstancias.


709
2017-09-13 17:24



siga estos pasos y luego podrá crear estilos personalizados para su formulario de carga de archivos:

1.) este es el formulario html simple (lea los comentarios html que he escrito aquí más abajo)

<form action="#type your action here" method="POST" enctype="multipart/form-data">
  <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
  <!-- this is your file input tag, so i hide it!-->
  <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <input type="submit" value='submit' >
</form>

2.) luego use este script simple para pasar el evento click a la etiqueta de entrada de archivo.

function getFile(){
     document.getElementById("upfile").click();
}

ahora puede usar cualquier tipo de estilo sin preocuparse de cómo cambiar los estilos predeterminados. Lo sé muy bien, porque he estado tratando de cambiar los estilos predeterminados por mes y medio. créeme, es muy difícil porque diferentes navegadores tienen etiquetas de entrada de carga diferentes. Por lo tanto, use este para crear sus formularios de carga de archivos personalizados. Aquí está el código de CARGA AUTOMÁTICA.

<html>
<head>
<style>
#yourBtn{
   position: relative;
       top: 150px;
   font-family: calibri;
   width: 150px;
   padding: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #DDD;
   cursor:pointer;
  }
</style>
<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>
</head>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>

¡disfrutar!

Que tengas un buen día,


173
2018-03-03 14:42



Escóndelo con CSS y usa un botón personalizado con $ (selector) .click () para activar el botón Examinar. luego configure un intervalo para verificar el valor del tipo de entrada del archivo. el intervalo puede mostrar el valor para el usuario para que el usuario pueda ver qué se sube. el intervalo se borrará cuando se envíe el formulario [EDITAR] Lo siento, estuve muy ocupado con la intención de actualizar esta publicación, aquí hay un ejemplo

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

73
2017-07-05 11:14



HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Violín: http://jsfiddle.net/M7BXC/

También puede alcanzar sus objetivos sin jQuery con JavaScript normal.

Ahora el newBtn está vinculado con el html_btn y puedes diseñar tu nuevo btn como quieras: D


55
2017-08-02 08:13



Todos los motores de renderizado generan automáticamente un botón cuando <input type="file"> es creado. Históricamente, ese botón ha sido completamente improvisado. Sin embargo, Trident y WebKit han agregado ganchos a través de pseudo-elementos.

Tridente

A partir de IE10, el botón de entrada de archivo se puede diseñar con el ::-ms-browse pseudo-elemento. Básicamente, cualquier regla CSS que aplique a un botón normal se puede aplicar al pseudo-elemento. Por ejemplo:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Esto se muestra de la siguiente manera en IE10 en Windows 8:

This displays as follows in IE10 on Windows 8:

WebKit

WebKit proporciona un gancho para su botón de entrada de archivo con el ::-webkit-file-upload-button pseudo-elemento. Nuevamente, se puede aplicar prácticamente cualquier regla de CSS, por lo tanto, el ejemplo de Trident también funcionará aquí:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Esto se muestra de la siguiente manera en Chrome 26 en OS X:

This displays as follows in Chrome 26 on OS X:


45
2018-05-01 07:37



 <label>
    <input type="file" />
 </label>

Puede envolver su tipo de entrada = "archivo" dentro de una etiqueta para la entrada. Estile la etiqueta como prefiera y oculte la entrada con pantalla: ninguna;


20
2017-08-23 01:33



Si está utilizando Bootstrap 3, esto funcionó para mí:

Ver http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Que produce el siguiente botón de entrada de archivo:

Example button

En serio, echa un vistazo http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/


18
2017-08-05 16:49



Puedo hacerlo con CSS puro usando el código a continuación. He usado bootstrap y font-awesome.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>


18
2017-12-30 08:07



Esto es simple con jquery. Para dar un ejemplo de código de Ryansugerencia de s con una ligera modificación.

Html básico:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Asegúrese de configurar el estilo en la entrada cuando esté listo: opacity: 0 No puedes configurar display: none porque necesita ser clicable. Pero puede colocarlo debajo del botón "nuevo" o colocarlo debajo de otra cosa con índice z, si lo prefiere.

Configure algunos jquery para hacer clic en la entrada real cuando hace clic en la imagen.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Ahora tu botón está funcionando. Simplemente corte y pegue el valor cuando lo cambie.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! Es posible que deba analizar el valor de val () como algo más significativo, pero debe estar todo listo.


11
2017-12-04 00:38



VISIBILIDAD: TRUCO oculto

Suelo ir por el visibility:hidden truco

este es mi botón de estilo

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

este es el tipo de entrada = botón de archivo. Nota la visibility:hidden regla

<input type="file" id="upload" style="visibility:hidden;">

este es el bit de JavaScript para unirlos. Funciona

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

8
2018-06-24 23:33