[Html] Diseño de un tipo de entrada = botón "archivo"


Answers

¡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 atributo for asociado a un elemento de entrada de archivo oculto . (La etiqueta de atributo debe coincidir con la id del elemento de archivo 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 simplemente envolver directamente el elemento de entrada de archivo con una etiqueta: (example)

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

En términos de estilo, simplemente oculte 1 el elemento de entrada usando el selector de atributos .

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

Entonces, todo lo que necesita hacer es diseñar el elemento de label personalizado. (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 la display: none , no funcionará en IE8 y abajo. Además, tenga en cuenta que jQuery validate no valida los campos ocultos de forma predeterminada. Si alguna de estas cosas es un problema para usted, aquí hay dos métodos diferentes para ocultar la entrada ( 1 , 2 ) que funciona en estas circunstancias.

Question

Cómo estilo el type="file" entrada type="file" botón type="file" .




Esto es simple con jquery. Para dar un ejemplo de código de la sugerencia de 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 puede configurar la display: none porque es necesario hacer clic en ella. 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.




Todos los motores de renderizado generan automáticamente un botón cuando se crea un <input type="file"> . 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 pseudo-elemento ::-ms-browse . 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:

WebKit

WebKit proporciona un gancho para su botón de entrada de archivo con el pseudo-elemento ::-webkit-file-upload-button . 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:




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:

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




Aquí usamos un tramo para activar la entrada de tipo de archivo y simplemente personalizamos ese tramo , para que podamos agregar cualquier estilo usando esta forma.

Tenga en cuenta que usamos la etiqueta de entrada con visibilidad: opción oculta y la activamos en el lapso.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Reference




Tal vez muchos amigos. Pero me gusta esto en CSS puro con fa-buttons:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





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

Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/




Aquí hay una solución que también muestra el nombre del archivo elegido: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

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

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }



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



No se deje engañar por las "excelentes" soluciones exclusivas de CSS que son realmente muy específicas del navegador, o que se superponen al botón de estilo sobre el botón real, o que lo fuerzan a usar una <label> lugar de un <button> , o cualquier otro tipo de pirateo. JavaScript ES NECESARIO para que funcione para uso general. Por favor, estudia cómo lo hacen Gmail y DropZone si no me crees.

Simplemente coloque un botón normal como quiera, luego llame a una función JS simple para crear y vincular un elemento de entrada oculto a su botón con estilo.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Observe cómo el código anterior lo vuelve a vincular después de cada vez que el usuario elige un archivo. Esto es importante porque solo se llama a "cambio" si el usuario cambia el nombre del archivo. Pero es probable que desee obtener el archivo cada vez que el usuario lo proporciona.




He encontrado un método muy fácil para cambiar el botón de archivo a una imagen. Simplemente etiqueta una imagen y colócala encima del botón de archivo.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Al hacer clic en la imagen etiquetada, selecciona el botón de archivo.




Update Nevermind, this doesn't work in IE or it's new brother, FF. Works on every other type of element as expected, but doesn't work on file inputs. A much better way to do this is to just create a file input and a label that links to it. Make the file input display none and boom, it works in IE9+ seamlessly.

Warning: Everything below this is crap!

By using pseudo elements positioned/sized against their container, we can get by with only one input file (no additional markup needed), and style as per usual.

Demo

<input type="file" class="foo">

.foo {
    display: block;
    position: relative;
    width: 300px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.foo:hover:after {
    background: #5978f8;
}
.foo:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #3c5ff4;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

¡Disfruten chicos!

Old Update

Turned this into a Stylus mixin. Should be easy enough for one of you cool SCSS cats to convert it.

file-button(button_width = 150px)
  display block
  position relative
  margin auto
  cursor pointer
  border 0
  height 0
  width 0
  outline none
  &:after
    position absolute
    top 0
    text-align center
    display block
    width button_width
    left -(button_width / 2)

Uso:

<input type="file">

input[type="file"]
    file-button(200px)



Una solución realmente inteligente que usa jQuery y que funciona en todos los navegadores más antiguos, así como en los nuevos, que encontré here . Se ocupa de todos los problemas de estilo y clic (), utilizando el botón de búsqueda de archivos real. Hice una versión simple de javascript: fiddle La solución es tan simple como genial: hacer que la entrada de archivos sea invisible, y usar un trozo de código para colocarlo debajo del mousecursor.

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}



These answers are nice, and they all work for very specific use cases. That is to say, they are opinionated.

So, here's an answer that assumes nothing, but will work no matter how you modify it. You can change design with css, add javascript to maybe show a file name on change, etc. it will still always work.

Código:

Here is the core css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

and the core html:

<div class="file-input">
  <input type="file"/>
</div>

As you can see, we are forcing any pointer event(click) that happens on the .file-input element, or any of its children, to be proxied to the file input. This is because the file input is positioned absolute and will consume the width/height of the container always. You can therefore customize to fit your need. style the wrapper into a button, use some js to display file name on select, etc. nothing will break so long as the above core code remains intact.

Como verá en la demostración, agregué un spantexto con el texto "Seleccionar archivo" y una clase con estilos adicionales para .file-inputdarle estilo al div. Este debería ser el punto de partida canónico para cualquier persona que desee crear un elemento de carga de archivos personalizado.

Demostración: JSFIDDLE




Aquí hay una solución que realmente no le da estilo al elemento <input type="file" /> , sino que utiliza un elemento <input type="file" /> encima de otros elementos (que se pueden diseñar). El elemento <input type="file" /> no es realmente visible, por lo tanto, la ilusión general es de un control de carga de archivos muy bien diseñado.

Me encontré con este problema recientemente y, a pesar de la gran cantidad de respuestas en , ninguno parecía encajar en la factura. Al final, terminé personalizando esto para tener una solución simple y elegante.

También probé esto en Firefox, IE (11, 10 y 9), Chrome y Opera, iPad y algunos dispositivos Android.

Aquí está el enlace de JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

¡¡¡Espero que esto ayude!!!




la única forma en que puedo pensar es encontrar el botón con javascript después de que se renderice y asignarle un estilo

también puedes mirar www.quirksmode.org/dom/inputfile.html