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?
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?
Respuestas:
Si está buscando tener su propio botón para cargar un archivo en lugar de usarlo <input type="file" />
, puede hacer algo como:
<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />
Tenga en cuenta que usé visibility: hidden
, en lugar de display: none
. No puede llamar al evento de clic en una entrada de archivo no mostrada.
click()
una display:none
entrada y funcionó
click()
en un elemento con display: none
obras! ;) Cómo han cambiado las cosas en los últimos cuatro años.
hidden
atributo en su lugar style="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 ...
$(staticElementParent).on("click", "dynamicChild", function(){})
debugger;
palabra clave ya no interrumpe el clic programático
Solo 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>
adecuado for
(apunta a la entrada), opcionalmente con el estilo de un botón (con bootstrap, use btn btn-default
). Cuando el usuario hace clic en la etiqueta, se abre el cuadro de diálogo, ejemplo:
<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
Click me
</label>
<input type="file" id="exampleInput" style="display: none" />
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:
$('input[type="file"]').click();
He probado este jsFiddle en Chrome, Firefox y Opera, y todos ellos se observa el cuadro de diálogo de exploración de archivos.
hover
evento: jsfiddle.net/UQfaZ/1
Lo envuelvo input[type=file]
en una etiqueta, luego le doy un estilo label
a su gusto y lo oculto input
.
<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
<input type="file">
<span><i class="fa fa-upload"></i></span>
</label>
<style>
.fileLabel input[type="file"] {
position: fixed;
top: -1000px;
}
</style>
Solución puramente CSS.
<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
fileDialog()
.then(file => {
const data = new FormData()
data.append('file', file[0])
data.append('imageName', 'flower')
// Post to server
fetch('/uploadImage', {
method: 'POST',
body: data
})
})
La mejor solución, funciona en todos los navegadores ... incluso en el móvil.
<div class="btn" id="s_photo">Upload</div>
<input type="file" name="s_file" id="s_file" style="opacity: 0;">';
<!--jquery-->
<script>
$("#s_photo").click(function() {
$("#s_file").trigger("click");
});
</script>
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. :)
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í.
<input type="file">
, no <select>
.
$.click()
.
Asegúrese de que está utilizando el enlace para obtener los accesorios de los componentes en REACT.
class FileUploader extends Component {
constructor (props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
onChange=(e,props)=>{
const files = e.target.files;
const selectedFile = files[0];
ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
}
handleClick = () => {
this.refs.fileUploader.click();
}
render()
{
return(
<div>
<button type="button" onClick={this.handleClick}>Select File</button>
<input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
</div>)
}
}
Para aquellos que quieren lo mismo pero están usando React
openFileInput = () => {
this.fileInput.click()
}
<a href="#" onClick={this.openFileInput}>
<p>Carregue sua foto de perfil</p>
<img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>
<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
<input id="myInput" type="file" />
</form>
<script>
const uploadButton = document.getElementById('uploadButton');
const myInput = document.getElementById('myInput');
uploadButton.addEventListener('click', () => {
myInput.click();
});
</script>