web-dev-qa-db-fra.com

Comment lier un bouton d'entrée à une fenêtre de sélection de fichier?

Duplicata possible:
entrée du fichier de déclenchement Jquery

Je travaille sur un formulaire qui permet aux utilisateurs de télécharger des images sur un site Web. Jusqu'à présent, j'ai une solution de glisser-déposer fonctionnant dans Chrome et Safari. Cependant, je dois également prendre en charge l'action des utilisateurs en cliquant sur un bouton et en parcourant les fichiers de la manière traditionnelle.

Similaire à ce que cela ferait:

<input type="file" name="my_file">

Cependant, plutôt que d'avoir la zone de description de fichier maladroite et le bouton Parcourir non modifiable, je préfère utiliser quelque chose comme ceci:

<input type="button" id="get_file">

Ma question est donc de savoir comment faire pour que ce bouton ouvre une fenêtre de sélection de fichiers et traite la sélection de la même manière que type="file" travaillerait?

À votre santé.

Ma solution

HTML:

<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">

CSS:

#my-file { visibility: hidden; }

jQuery:

$('#my-button').click(function(){
    $('#my-file').click();
});

Fonctionnant jusqu'à présent sur Chrome, Firefox et IE7 + (je n'ai pas essayé IE6).

javascriptjqueryhtmlformsfile-upload
15
diggersworld

Vous pouvez utiliser JavaScript et déclencher l'entrée du fichier caché lorsque vous avez cliqué sur l'entrée du bouton.

http://jsfiddle.net/gregorypratt/dhyzV/ - simple

http://jsfiddle.net/gregorypratt/dhyzV/1/ - amateur avec un peu de JQuery

Ou, vous pouvez styliser un div directement sur l'entrée du fichier et définir pointer-events en CSS à aucun pour permettre aux événements de clic de passer à l'entrée de fichier qui est "derrière" la div fantaisie. Cela ne fonctionne cependant que dans certains navigateurs; http://caniuse.com/pointer-events

21
Greg

Si vous souhaitez autoriser l'utilisateur à rechercher un fichier, vous devez disposer d'un input type="file" Le plus proche de vos besoins serait de placer le input type="file" sur la page et cachez-le. Ensuite, déclenchez l'événement de clic de l'entrée lorsque vous cliquez sur le bouton:

#myFileInput {
    display:none;
}

<input type="file" id="myFileInput" />
<input type="button"
       onclick="document.getElementById('myFileInput').click()" 
       value="Select a File" />

Voici n violon qui fonctionne .

Remarque: Je ne recommanderais pas cette approche. Le input type="file" est le mécanisme que les utilisateurs ont l'habitude d'utiliser pour télécharger un fichier.

6
James Hill