javascript - example - Programe programáticamente el cuadro de diálogo "Seleccionar archivo"

jquery link href

Question

Tengo un elemento de entrada de archivo oculto. ¿Es posible activar su cuadro de diálogo Seleccionar archivo desde el evento de clic de un botón?

Answer 1

Asegúrate de estar usando 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>)
}
}

Answer 2

Envuelvo la input[type=file] en una etiqueta, luego le doy estilo a la label y oculto la 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 Purely CSS.

Answer 3

Esto funcionó para mí:

$(''#fileInput'').val('''');

Answer 4

La mayoría de las respuestas aquí carecen de información útil:

Sí, puede hacer clic en el elemento de entrada mediante programación utilizando jQuery / JavaScript, pero solo si lo hace en un controlador de eventos perteneciente a un evento ¡QUE COMENZÓ EL USUARIO!

Entonces, por ejemplo, no pasará nada si usted, el script, hace clic en el botón programáticamente en una devolución de llamada ajax, pero si coloca la misma línea de código en un controlador de eventos que el usuario generó, funcionará.

PS El debugger; La palabra clave interrumpe la ventana de exploración si está antes del clic programático ... al menos en Chrome 33 ...

Answer 5

La mejor solución, funciona en todos los navegadores ... incluso en dispositivos móviles.

<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 esconde, simplemente no se muestra. :)

Answer 6

Nativamente, la única forma es creando un elemento <input type="file"> y luego simulando un clic, desafortunadamente.

Hay un pequeño complemento (plug descarado) que le quitará 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
})
})

Answer 7

No estoy seguro de cómo los navegadores manejan los clics en los elementos type="file" (cuestiones de seguridad y todo), pero esto debería funcionar:

$(''input[type="file"]'').click();

He probado este JSFiddle en Chrome, Firefox y Opera y todos muestran el cuadro de diálogo de búsqueda de archivos.

Answer 8

No existe una forma cruzada de hacerlo, por razones de seguridad. Lo que la gente suele hacer es superponer el archivo de entrada sobre otra cosa y establecer su visibilidad en oculta para que se active por sí mismo. Más información aquí.

Answer 9

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"/>

Answer 10

Solo para el registro, hay una solución alternativa que no requiere javascript. Es un poco complicado, explotando el hecho de que al hacer clic en una etiqueta se establece el foco en la entrada asociada.

Necesita una <label> con un atributo adecuado for (puntos a la entrada), opcionalmente diseñado como un botón (con arranque, use btn btn-default ). Cuando el usuario hace clic en la etiqueta, se abre el cuadro de diálogo, por 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" />

Answer 11

Usando jQuery puede llamar a click() para simular un clic.

Answer 12

Si está buscando tener su propio botón para cargar un archivo en lugar de usar <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 utilicé visibility: hidden , en lugar de display: none . No puede llamar al evento click en una entrada de archivo no mostrada.