Activar programáticamente el cuadro de diálogo "seleccionar archivo"

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?

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.

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 ...

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.

Lo envuelvo input[type=file]en una etiqueta, luego le doy un estilo labela 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.

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. :)

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í.

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>)
  }
}

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

Esto funcionó para mí:

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

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>