web-dev-qa-db-fra.com

Comment faire pour que l'élément d'entrée HTML de type "fichier" accepte uniquement les fichiers pdf?

est-il possible que ce fichier d'élément html

<input name="file1" type="file" style="width:300px">

accepter uniquement les fichiers PDF et lorsque nous parcourons son seul fichier PDF ...

Merci

32
air

Pour que l'élément de formulaire d'entrée HTML file accepte uniquement les PDF, vous pouvez utiliser l'attribut accept dans les navigateurs modernes tels que Firefox 9+, Chrome 16+ , Opera 11+ et IE10 + comme tels:

<input name="file1" type="file" accept="application/pdf">

Vous pouvez enchaîner plusieurs types MIME avec une virgule.

La chaîne suivante accepte les fichiers JPG, PNG, GIF, PDF et EPS:

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">

Dans les navigateurs plus anciens, la boîte de dialogue de fichier natif du système d'exploitation ne peut pas être restreinte - vous devez utiliser Flash ou une applet Java ou quelque chose comme ça pour gérer le transfert de fichiers.

Et bien sûr, il va sans dire que cela ne fait rien pour vérifier la validité du type de fichier . Vous le ferez côté serveur une fois le fichier téléchargé.

Une petite mise à jour - avec javascript et FileReader API vous pourriez faire plus de validation côté client avant de télécharger des fichiers volumineux sur votre serveur et les vérifier à nouveau.

61
Charlie Schliesser
3
Jonathan Feinberg

Pas d'autre moyen que de valider l'extension de fichier avec JavaScript lorsque le chemin d'entrée est rempli par le sélecteur de fichiers. Pour implémenter quelque chose de plus sophistiqué, vous devez écrire votre propre composant pour le navigateur de votre choix (activeX ou XUL)

Il y a un attribut "accepter" dans HTML4.01 mais je ne connais aucun navigateur le supportant - par exemple accept="image/gif,image/jpeg - c'est donc une spécification soignée mais peu pratique

2
DVK

Les affiches précédentes ont fait une petite erreur. L'attribut accept n'est qu'un filtre d'affichage. Il ne validera pas votre inscription avant de la soumettre.

Cet attribut force la boîte de dialogue de fichier à afficher uniquement le type MIME requis. Mais l'utilisateur peut remplacer ce filtre. Il peut choisir . et voir tous les fichiers du répertoire courant. Ce faisant, il peut sélectionner n'importe quel fichier avec n'importe quelle extension et soumettre le formulaire.

Donc, pour répondre à l'affiche originale, NON. Vous ne pouvez pas limiter le fichier d'entrée à une extension particulière à l'aide de HTML.

Mais vous pouvez utiliser javascript pour tester le nom de fichier qui a été choisi, juste avant de soumettre. Insérez simplement un attribut onclick sur votre bouton d'envoi et appelez le code qui testera la valeur du fichier d'entrée. Si l'extension est interdite, vous devrez retourner false pour invalider le formulaire. Vous pouvez même utiliser un validateur personnalisé jQuery et ainsi de suite pour valider le formulaire.

Enfin, vous devrez également tester l'extension côté serveur. Même problème concernant la taille de fichier maximale autorisée.

1
Kir Kanos

Pas avec le contrôle de fichier HTML, non. Un téléchargeur de fichiers flash peut le faire pour vous. Vous pouvez utiliser du code côté client pour vérifier l'extension PDF après leur sélection, mais vous ne pouvez pas contrôler directement ce qu'ils peuvent sélectionner.

0
Nathan Taylor

Non.

Mais vous pouvez vérifier SWFUpload et Ajax Upload

0
Scott Saunders

Il peut être utile d'empêcher l'utilisateur distrait de faire un mauvais choix involontaire, mais dans tous les cas, vous devez quand même effectuer la vérification côté serveur.
La meilleure façon est d'être clair dans la page de téléchargement. Après cela, si l'utilisateur télécharge bêtement un gros fichier avec le mauvais type, c'est sa perte de temps, non?

0
PhiLho