Tengo un elemento de entrada de archivo oculto. ¿Es posible activar su cuadro de diálogo de selección de archivo desde el evento de clic de un botón?
javascript
jquery
html
tamakisquare
fuente
fuente
click()
unadisplay:none
entrada y funcionóclick()
en un elemento condisplay: none
obras! ;) Cómo han cambiado las cosas en los últimos cuatro años.hidden
atributo en su lugarstyle="visibility:hidden"
:<input id="myInput" type="file" hidden>
( w3schools.com/tags/att_global_hidden.asp )La mayoría de las respuestas aquí carecen de información útil:
Sí, puede hacer clic mediante programación en el elemento de entrada usando jQuery / JavaScript, pero solo si lo hace en un controlador de eventos que pertenece a un evento QUE FUE INICIADO POR EL USUARIO.
Entonces, por ejemplo, no sucederá nada si usted, el script, hace clic programáticamente en el botón en una devolución de llamada ajax, pero si coloca la misma línea de código en un controlador de eventos que fue generado por el usuario, funcionará.
PD: la
debugger;
palabra clave interrumpe la ventana de exploración si está antes del clic programático ... al menos en Chrome 33 ...fuente
$(staticElementParent).on("click", "dynamicChild", function(){})
debugger;
palabra clave ya no interrumpe el clic programáticoSolo para el registro, existe una solución alternativa que no requiere javascript. Es un truco, explotar el hecho de que al hacer clic en una etiqueta, el foco se centra en la entrada asociada.
Necesita un atributo
<label>
adecuadofor
(apunta a la entrada), opcionalmente con el estilo de un botón (con bootstrap, usebtn btn-default
). Cuando el usuario hace clic en la etiqueta, se abre el cuadro de diálogo, ejemplo:fuente
No estoy seguro de cómo los navegadores manejan los clics en los
type="file"
elementos (preocupaciones de seguridad y todo), pero esto debería funcionar:He probado este jsFiddle en Chrome, Firefox y Opera, y todos ellos se observa el cuadro de diálogo de exploración de archivos.
fuente
hover
evento: jsfiddle.net/UQfaZ/1Lo envuelvo
input[type=file]
en una etiqueta, luego le doy un estilolabel
a su gusto y lo ocultoinput
.Solución puramente CSS.
fuente
<input type="file" hidden>
para eliminar la necesidad de aplicar un estilo CSS.De forma nativa, la única forma es crear un
<input type="file">
elemento y luego simular un clic, desafortunadamente.Hay un pequeño complemento (enchufe desvergonzado) que eliminará el dolor de tener que hacer esto todo el tiempo: file-dialog
fuente
La mejor solución, funciona en todos los navegadores ... incluso en el móvil.
Ocultar el tipo de archivo de entrada causa problemas con los navegadores, la opacidad es la mejor solución porque no se oculta, simplemente no se muestra. :)
fuente
visibility:hidden
debería ser una mejor opción.visibility: hidden
todavía afecta el diseño.display: none
es lo que quieres.No existe una forma de hacerlo en varios navegadores, por razones de seguridad. Lo que la gente suele hacer es superponer el archivo de entrada sobre otra cosa y configurar su visibilidad como oculta para que se active por sí solo. Más info aquí.
fuente
<input type="file">
, no<select>
.$.click()
.Asegúrese de que está utilizando el enlace para obtener los accesorios de los componentes en REACT.
fuente
Usando jQuery puede llamar
click()
para simular un clic.fuente
Esto funcionó para mí:
fuente
Para aquellos que quieren lo mismo pero están usando React
fuente
fuente