Diseñar un tipo de input = "file"

He leído sobre esto desde varios lugares.

He intentado con el método que se encuentra aquí: http://www.quirksmode.org/dom/inputfile.html

No pude arreglarlo. Así que probé un método CSS / HTML y funciona muy bien en Firefox, Chrome, Safari y Opera (todas las versiones más recientes) pero no en (lo adivinaste) IE8.

Se ve bien, cuando lo haces solo, no funciona. Si haces doble clic, funciona.

¿Alguna idea de cómo hacer que esto funcione con un solo clic?

Actualmente estoy usando los comentarios condicionales de IE para decirle a los usuarios con IE que hagan doble clic en el button de selección. El sitio está actualmente en layout y aún no está disponible para los usuarios y les gustaría resolver este problema antes de que se publique, si es posible.

8 Solutions collect form web for “Diseñar un tipo de input = "file"”

Creo que encontré dos soluciones a tu problema. Está utilizando: filter:alpha(opacity: 0) en su class .file , ocultando así el button "Examinar …" que normalmente ve en los controles de carga.

La primera solución sería usar un condicional para establecer el CSS que replaceá su image de lujo "Seleccionar" con el button normal "Botón de búsqueda" cuando el usuario está usando IE.

El segundo sería jugar con el tamaño de la input FileAttachment y así el button oculto "Examinar …" encajaría en la position de la image "Seleccionar". A partir de ahí, solo tiene que asegurarse de que la propiedad de z-index del button sea más alta que la de la image.

Avíseme si estas soluciones resuelven sus necesidades.

:RE

Una buena solución que le permite hacer un solo clic es usar un elemento de label, y su propiedad "para", que le permite conectarlo a la input. Otro elemento importante de esta solución es aplicar filter: alpha (opacity = 0) en el elemento de input.

HTML:

  <label for="fileupload"> <input id="fileupload" type="file" > <p>click here</p> </label> 

CSS:

 label { background-color: #ECECEC; display: block; width: 600px; height: 600px; cursor: pointer; } input[type="file"] { width: 100%; height: 100%; z-index: 100; position: relative; opacity: 0; filter:alpha(opacity=0); cursor: pointer; } 

Obtuve una solución que te ayudará a darle a tu button el estilo que prefieras y mantenerlo con un solo clic en todos los browseres.

Básicamente crea un div y dale una class o id, por ejemplo, sake llamamos a esto "outer_div".

A continuación, coloque la input de file dentro de "outer_div" y también le dé un id. Para este ejemplo, vamos a llamarlo "file_input_name".

Luego viene el CSS …

Para el "outer_div", dale las siguientes properties

  #outer_div{ cursor:pointer; overflow:hidden; display:block; float:left; position:relative; width:83px; height:25px; background:url(your button image goes here) no-repeat; } 

Asegúrate de que tu button tenga las mismas properties de ancho para que esto funcione.

A continuación, el CSS para file_input_name:

  #file_input_name{ position:relative; float:left; cursor:pointer; right:138px; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; text-align: right; } 

Esto debería funcionar. Básicamente, lo que sucede es que estamos colocando la input del file para que el button Examinar esté sobre tu image de background en lugar de donde está la URL del file.

He hecho esto yo mismo y funciona en IE y Firefox / safari / chrome.

Déjame saber cómo te va o si necesitas más ayuda.

La razón por la que deben hacer doble clic es porque ese es el "área de text".

La primera image aquí es de un control de carga IE8. Tenga en count cómo está el textbox y el button. El usuario solo hace clic en el button O hace doble clic en el textbox para que aparezca el button.

[arg, lo siento, mi reputación no es lo suficientemente alta para las imágenes]

Cuando superpone eso, el área de text se superpone a lo que desea que sea un solo clic, lo que requiere un doble clic.

La siguiente image es el mismo control de carga de files sin opacidad, tiene un button encima y tiene un esquema del inspector de DOM de IE8. Si hago clic en la parte más a la derecha del rectángulo azul, un solo clic funciona, en cualquier otro lugar se requiere un doble. También tenga en count que la corrección de edición de text se superpone desde la input del file en la parte superior del button.

[image omitida]

La solución es networkingimensionar / posicionar el file de input de file oculto para colocar el button de exploración donde lo desee.

Usar algo de magia de Bootstrap , lo hice, es súper fácil.

Bien, después de insert el enlace a Bootstrap css en la label de tu cabeza, haz esto:

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

Eso creará un file de tipo de input, diseñado por bootstrap css.

Y ahora la parte difícil:

  .fileUpload { position: relative; overflow: hidden; margin: 10px; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } 

Y eso es todo, ahora tiene un button funcional (file de tipo de input) con estilo.

Encontré este artículo porque tenía el mismo problema, puedes consultarlo para get más información.

Básicamente, no es su problema en realidad IE toma un control de carga de file de manera diferente. Comprende el control de carga de files como un textbox y button de input, cuando haces clic en el button "Buscar" o "Seleccionar", abre el cuadro de dialog Abrir, pero cuando haces clic solo en el text de carga de files, enfocas el textbox y luego nuevamente click este textbox, se abrirá el cuadro de dialog Abrir. Se puede decir que esto es un error pnetworkingefinido en IE, por lo que no podemos hacer nada al respecto y la mayoría de los usuarios conocen este problema.

Si intenta ocultar el button de input pnetworkingeterminado sin perder el comportamiento pnetworkingeterminado de IE8 en el file de input y también en el soporte de navigation cruzada, intente aplicar

 input.file{ width:0 ; height:0; } //supposing your file input has class of .file` 

en el CSS y tu bueno para ir

Ha pasado un time desde que hice esta pregunta y debajo está el método que ahora uso para diseñar inputs de files. Esta información proviene de Codrops . Entra en muchos más detalles y proporciona varios ejemplos, pero estos son los conceptos básicos:

HTML

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

NECESITA CHEQUEAR PARA JS

 <html class="no-js"> <head> <!-- remove this if you use Modernizr --> <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script> </head> </html> 

CSS

 .js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .inputfile + label { max-width: 80%; font-size: 1.25rem; /* 20px */ font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block; overflow: hidden; padding: 0.625rem 1.25rem; /* 10px 20px */ } .no-js .inputfile + label { display: none; } .inputfile:focus + label, .inputfile.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } .inputfile + label * { /* pointer-events: none; */ /* in case of FastClick lib use */ } .inputfile + label svg { width: 1em; height: 1em; vertical-align: middle; fill: currentColor; margin-top: -0.25em; /* 4px */ margin-right: 0.25em; /* 4px */ } 

JS

 ;( function ( document, window, index ) { 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; }); // Firefox bug fix input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); }); input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); }); }); }( document, window, 0 )); 
  • jQuery .height () que emite el mismo valor que .scrollHeight en div con overflow: auto (IE8)
  • JavaScript Object.create e IE8
  • jQuery + IE8 = El object no admite esta propiedad o método. ¿Cómo arreglar esto?
  • Cómo agregar componentes específicos de bower como bloque condicional IE8 en Gulp
  • ¿Por qué IE 8 navigator.userAgent devuelve MSIE 7.0?
  • El enlace KnockoutJS falla en IE8
  • Cómo despachar el evento de la rueda del mouse en IE más antiguo
  • javascript no funciona en ie8
  • ¿Por qué getBoundingClientRect es lento en IE8?
  • IE8 PRE problemas de label
  • ¿Por qué el error de IE8 en $ .post () ?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.