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 )); 
  • La aplicación AngularJS no se procesa correctamente en IE 8 por múltiples razones
  • Jquery ZeroClipboard o Zclip nada en el portapapeles IE 8 y 7
  • Uso Google Tag Manager para activar las tags en mi website. Variables "indefinidas" en el código personalizado para cualquier versión de Internet Explorer
  • ¿Cómo se puede hacer que el text de copyright en un ajuste de map de Google cuando el map es pequeño?
  • IE @ font-face inestable con JavaScript?
  • ¿En qué medida comstack Traceur a Javascript compatible con IE8?
  • el código dentro de pre va en una línea en IE8
  • HTML y CSS en las URL que causan errores 404 (User Agent = Trident / 4.0)
  • El object no admite la propiedad o el método 'filter'
  • Rendimiento de clientWidth en IE8
  • ¿Errores IE8 al definir un object Javascript?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.