Déclenchez par programme la boîte de dialogue «Sélectionner un fichier»

J'ai un élément d'entrée de fichier caché. Est-il possible de déclencher sa boîte de dialogue de sélection de fichier à partir d'un événement de clic sur un bouton?

Si vous cherchez à avoir votre propre bouton pour télécharger un fichier au lieu d'utiliser <input type="file" />, vous pouvez faire quelque chose comme:

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

Notez que j'ai utilisé visibility: hidden, au lieu de display: none. Vous ne pouvez pas appeler l'événement de clic sur une entrée de fichier non affichée.

La plupart des réponses ici manquent d'informations utiles:

Oui, vous pouvez cliquer par programme sur l'élément d'entrée à l'aide de jQuery / JavaScript, mais uniquement si vous le faites dans un gestionnaire d'événements appartenant à un événement QUI A ÉTÉ DÉMARRÉ PAR L'UTILISATEUR!

Ainsi, par exemple, rien ne se passera si vous, le script, cliquez par programme sur le bouton dans un rappel ajax, mais si vous mettez la même ligne de code dans un gestionnaire d'événements qui a été déclenché par l'utilisateur, cela fonctionnera.

PS Le debugger;mot-clé perturbe la fenêtre de navigation si c'est avant le clic programmatique ... au moins en chrome 33 ...

Pour mémoire, il existe une solution alternative qui ne nécessite pas de Javascript. C'est un peu un hack, exploitant le fait que cliquer sur une étiquette met l'accent sur l'entrée associée.

Vous avez besoin d'un <label>avec un forattribut approprié (pointe vers l'entrée), optionnellement stylé comme un bouton (avec bootstrap, utilisez btn btn-default). Lorsque l'utilisateur clique sur l'étiquette, la boîte de dialogue s'ouvre, exemple:

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

Je ne sais pas comment les navigateurs gèrent les clics sur les type="file"éléments (problèmes de sécurité et tout), mais cela devrait fonctionner:

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

J'ai testé ce JSFiddle dans Chrome, Firefox et Opera et ils affichent tous la boîte de dialogue de navigation de fichiers.

J'emballe le input[type=file]dans une étiquette d'étiquette, puis je le stylise labelà votre guise et masque le 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>

Solution purement CSS.

Nativement, le seul moyen est de créer un <input type="file"> élément puis de simuler un clic, malheureusement.

Il y a un petit plugin (plug sans vergogne) qui vous évitera d'avoir à faire cela tout le temps: 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 meilleure solution, fonctionne dans tous les navigateurs .. même sur mobile.

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

Le masquage du type de fichier d'entrée pose des problèmes avec les navigateurs, l'opacité est la meilleure solution car elle ne se cache pas, mais ne s'affiche pas. :)

Il n'y a pas de moyen de le faire entre navigateurs, pour des raisons de sécurité. Ce que les gens font généralement, c'est superposer le fichier d'entrée sur quelque chose d'autre et définir sa visibilité sur masqué afin qu'il soit déclenché par lui-même. Plus d'infos ici.

Assurez-vous que vous utilisez la liaison pour obtenir les accessoires de composant dans 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>)
  }
}

En utilisant jQuery, vous pouvez appeler click()pour simuler un clic.

Cela a fonctionné pour moi:

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

Pour ceux qui veulent la même chose mais utilisent 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>