web-dev-qa-db-fra.com

Déclencher 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 select file à partir d'un événement de clic d'un bouton?

javascriptjqueryhtml
76
tamakisquare

Si vous souhaitez 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 click sur une entrée de fichier non affichée.

120
Mike Gwilt

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

Oui, vous pouvez cliquer sur l'élément par entrée par programmation à l'aide de jQuery/JavaScript, mais uniquement si vous le faites dans un gestionnaire d'événements appartenant à un événement COMMENCÉ 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 placez la même ligne de code dans un gestionnaire d'événements créé par l'utilisateur, cela fonctionnera.

P.S. Le mot clé debugger; perturbe la fenêtre de navigation s'il se trouve avant le clic programmé ... au moins en chrome 33 ...

93
Fazi

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

Vous avez besoin d'un <label> avec un attribut for approprié (pointe vers l'entrée), optionnellement dénommé 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" />

56
m_x

Je ne sais pas comment les navigateurs gèrent les clics sur les éléments type="file" (problèmes de sécurité et autres), 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 dans les fichiers.

12
Bojangles

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>

Cacher le type de fichier d'entrée pose des problèmes avec les navigateurs. L'opacité est la meilleure solution car elle ne cache pas, mais ne montre pas. :)

2
Pessa

J'emballe le input[type=file] dans une étiquette, puis style le label à votre convenance 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. 

2
Ponyboy

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

Il existe un petit plugin (plug sans vergogne) qui vous évitera d'avoir à le faire 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
        })
    })
2
Alister Norris

Pour des raisons de sécurité, il n’existe pas de solution inter-navigateur. Ce que les gens font habituellement, c'est superposer le fichier d'entrée à autre chose et définir sa visibilité sur caché pour qu'il soit déclenché de son propre chef. Plus d'infos ici.

1
Alex Turpin

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>)
  }
}
0
m-farhan

Cela a fonctionné pour moi:

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

Pour ceux qui veulent la même chose mais qui 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"/>
0
Vinicius Lima

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

0
pdubs