Acionar programaticamente a caixa de diálogo “selecionar arquivo”

Eu tenho um elemento de entrada de arquivo oculto. É possível acionar sua caixa de diálogo de seleção de arquivo a partir do evento de clique de um botão?

Se quiser ter seu próprio botão para fazer upload de um arquivo em vez de usar <input type="file" />, você pode fazer algo como:

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

Observe que eu usei visibility: hidden, em vez de display: none. Você não pode chamar o evento click em uma entrada de arquivo não exibida.

A maioria das respostas aqui não contém informações úteis:

Sim, você pode clicar programaticamente no elemento de entrada usando jQuery / JavaScript, mas apenas se fizer isso em um manipulador de eventos pertencente a um evento QUE FOI INICIADO PELO USUÁRIO!

Assim, por exemplo, nada acontecerá se você, o script, clicar programaticamente no botão em um retorno de chamada ajax, mas se você colocar a mesma linha de código em um manipulador de eventos que foi gerado pelo usuário, ele funcionará.

PS A debugger;palavra-chave interrompe a janela de navegação se for anterior ao clique programático ... pelo menos no Chrome 33 ...

Apenas para registro, existe uma solução alternativa que não requer javascript. É uma espécie de hack, explorando o fato de que clicar em um rótulo define o foco na entrada associada.

Você precisa de um <label>com um foratributo adequado (aponta para a entrada), opcionalmente estilizado como um botão (com bootstrap, use btn btn-default). Quando o usuário clica no rótulo, a caixa de diálogo é aberta, por exemplo:

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

Não tenho certeza de como os navegadores lidam com cliques em type="file"elementos (questões de segurança e tudo), mas isso deve funcionar:

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

Eu testei este JSFiddle no Chrome, Firefox e Opera e todos eles mostram a caixa de diálogo de navegação de arquivo.

Eu envolvo o input[type=file]em uma tag de rótulo, estilizo de acordo labelcom sua preferência e oculto o 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>

Solução puramente CSS.

Nativamente, a única maneira é criar um <input type="file">elemento e, em seguida, simular um clique, infelizmente.

Existe um pequeno plugin (plug sem vergonha) que vai tirar a dor de ter que fazer isso o tempo todo: 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
        })
    })

A melhor solução, funciona em todos os navegadores .. até no celular.

<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 o tipo de arquivo de entrada causa problemas com os navegadores, a opacidade é a melhor solução porque não está ocultando, apenas não mostrando. :)

Não existe uma maneira cruzada de navegadores de fazer isso, por razões de segurança. O que as pessoas geralmente fazem é sobrepor o arquivo de entrada a qualquer outra coisa e definir sua visibilidade como oculta para que seja acionado por conta própria. Mais informações aqui.

Certifique-se de que está usando vinculação para obter adereços de componente em 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 você pode chamar click()para simular um clique.

Isso funcionou para mim:

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

Para quem quer o mesmo, mas está 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>