Attiva programmaticamente la finestra di dialogo "seleziona file"

Ho un elemento di input di file nascosto. È possibile attivare la sua finestra di dialogo Seleziona file dall'evento clic di un pulsante?

Se stai cercando di avere il tuo pulsante per caricare un file invece di usarlo <input type="file" />, puoi fare qualcosa come:

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

Nota che ho usato visibility: hidden, invece di display: none. Non è possibile chiamare l'evento clic su un input di file non visualizzato.

Alla maggior parte delle risposte qui mancano informazioni utili:

Sì, puoi fare clic in modo programmatico sull'elemento di input utilizzando jQuery / JavaScript, ma solo se lo fai in un gestore di eventi che appartiene a un evento CHE È STATO AVVIATO DALL'UTENTE!

Quindi, ad esempio, non accadrà nulla se tu, lo script, fai clic sul pulsante in modo programmatico in un callback ajax, ma se inserisci la stessa riga di codice in un gestore di eventi che è stato generato dall'utente, funzionerà.

PS La debugger;parola chiave interrompe la finestra di navigazione se è prima del clic programmatico ... almeno in Chrome 33 ...

Solo per la cronaca, esiste una soluzione alternativa che non richiede javascript. È un po 'un trucco, sfruttando il fatto che facendo clic su un'etichetta si pone l'accento sull'input associato.

Hai bisogno di un <label>con un forattributo appropriato (punta all'input), opzionalmente in stile come un pulsante (con bootstrap, usa btn btn-default). Quando l'utente fa clic sull'etichetta, si apre la finestra di dialogo, esempio:

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

Non sono sicuro di come i browser gestiscano i clic sugli type="file"elementi (problemi di sicurezza e tutto il resto), ma dovrebbe funzionare:

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

Ho testato questo JSFiddle in Chrome, Firefox e Opera e mostrano tutti la finestra di dialogo di ricerca dei file.

Mi avvolgo il input[type=file]in un tag label, quindi lo stile labeldi vostro gradimento, e nascondere il 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>

Soluzione puramente CSS.

Nativamente l'unico modo è creare un <input type="file">elemento e quindi simulare un clic, sfortunatamente.

C'è un piccolo plugin (plug senza vergogna) che ti toglierà il dolore di doverlo fare tutto il tempo: 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 soluzione migliore, funziona in tutti i browser .. anche su cellulare.

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

Nascondere il tipo di file di input causa problemi con i browser, l'opacità è la soluzione migliore perché non si nasconde, semplicemente non si mostra. :)

Non esiste un modo cross browser per farlo, per motivi di sicurezza. Quello che le persone di solito fanno è sovrapporre il file di input a qualcos'altro e impostarne la visibilità su nascosto in modo che venga attivato da solo. Maggiori info qui.

Assicurati di utilizzare l'associazione per ottenere gli oggetti di scena del componente in 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 puoi chiamare click()per simulare un clic.

Questo ha funzionato per me:

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

Per coloro che vogliono lo stesso ma utilizzano 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>