Input type file & type MIME

Version imprimable

Bonjours les HTML,
Je désirerai limiter les formats choisisables dans une balise input de type file par l'attribut accept qui prend en paramètre les valeurs MIME des fichiers voulus et j'ai aboutis a une notation comme suit qui ne limite rien du tout:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang='fr'> <head> <title>MIME</title> <meta charset='utf-8'> </head> <body> <form enctype='multipart/form-data' method='POST'> <input type='file' accept='image/gif image/png' maxlength='136579'> <input type='submit' value='submit'> </form> </body> </html>
Et le validateur ronchonne que l'attribut maxlength ,n'est pas accepter ici pour définir une taille de fichier maximale, bon il est vrai avant d'en arriver avec cette syntaxe j'ai bien ouvert une trentaine d'onglets avec mon validateur puis fait des recherches ici:
http://fr.wikipedia.org/wiki/Type_MIME
Si quelqu'un a réussi le tour de force de forcer a ne faire apparaitre que les formats voulus dans la fenetre de choix d'upload merci de bien vouloir refiler le tour de magie.

06/09/2011, 07h40
Invité

Bonjour,
voici ce que dit la doc (voir aussi l'aide du validateur w3c) :

Citation:

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

Attributs séparés par une virgule.

Citation:

Tip: Avoid using this attribute. File uploads should be validated on the server.
Note: The accept attribute is not properly supported by any of the major browsers.

En clair (et pour les non-anglophones), tant que les navigateurs ne le supportent pas, il est préférable d'éviter d'utiliser cet attribut, et de faire la validation sur le serveur.
06/09/2011, 08h41
Bisûnûrs

Ce n'est possible qu'en Flash.

Re.
Tu peux tester l'extension en JavaScript (avant envoi du formulaire) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
	<script type="text/javascript">
                /* UPLOAD : verification EXTENSION */
                function testExtension(valeur, extensionsok) {
                        var extensionsok; // extensions acceptées
                        var valeur = valeur.toLowerCase(); // en minuscule
                        var chainearray = valeur.split('.');
                        var chaineext = chainearray[chainearray.length-1]; // extension du fichier
                        if(extensionsok.indexOf(chaineext)==-1) { // extension PAS ok
                                alert('Erreur : ce fichier n\'est pas valide !\n\nExtensions acceptées : ' + extensionsok);
                        }
                };
        </script>

Code:

1
2
3
4
<form enctype="multipart/form-data" method="POST">
	<input type="file" accept="image/gif, image/png" onchange="testExtension(this.value,'gif,jpg,jpeg,png');">
	<input type="submit" value="submit">
</form>

ET (car js peut être désactivé) TOUJOURS TESTER APRES envoi (en PHP ou ...)

06/09/2011, 17h18
Bovino

Citation:

Envoyé par jreaux62

Tu peux tester l'extension en JavaScript (avant envoi du formulaire)

Certes, maintenant, si on demande de mettre un fichier correspondant à une image, il y a fort à parier que l'utilisateur qui ne met pas une image le fait à dessein et aura prit soin au préalable de désactiver JavaScript.
06/09/2011, 17h56
Invité

Citation:

Envoyé par Bovino

... l'utilisateur qui ne met pas une image le fait à dessein ...

Pas forcément. 99% des gens sont relativement honnêtes :
- on peut être distrait ou maladroit (et se tromper bêtement de fichier),
- on peut aussi vouloir télécharger un autre format d'image que ceux acceptés.(l'extension des fichiers est parfois masquée sur le PC)
- ...

C'est le 1% restant qui pose problème...

A ta place je garderais cette balise "accept" (pour les navigateurs qui l'accepte) et je doublerais par un contrôle en php qui est de toutes façons INDISPENSABLE.

Concernant "maxlength" tu peux supprimer cet attribut et mettre la ligne <input type = "hidden" name = "MAX_FILE_SIZE" value = "valeur en octets" /> avant ton input de type file.

<pub>
Si ça peux t'aider j'ai fais une classe php d'upload qui gère tout ça (gestion des erreurs incluses). En l'utilisant, ton code complet et fonctionnel pourrait être ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
require('Classe_Upload.php');
 
$repertoire_destination = 'PHOTO'; // à modifier suivant tes valeurs
 
//Déclaration de la classe 
$up = new Telechargement($repertoire_destination,'form_file','img','controle_form');
 
//Extensions autorisées
$extensions = array("gif", "png");
$up->Set_Extensions_accepte ($extensions);
 
// Rennommage des fichiers si déjà présents sur le serveur.
$up->Set_Renomme_fichier('incr');
 
// Téléchargement
$up->Upload("reload");
                
 
// Récupération des messages d'information
$resultat = $up->Get_Tab_message();
?>
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>MIME</title>
<meta charset='utf-8'>
</head>
<body>
<form enctype = "multipart/form-data" method="post" action = "<?php echo htmlspecialchars($_SERVER['PHP_SELF']).'?controle_form=1' ?>">
<input type = "hidden" name = "MAX_FILE_SIZE" value = "136579" />
<input type = "file" name = "img[]" accept = "image/gif, image/png" /><!-- ce sont les valeurs de types MIME de wikipedia  séparer par un espace comme me la répéter mon validateur -->
<input type = "submit" name = "form_file" value = "submit">
</form>
<?php //affichage des résultats
if (!empty($resultat))
        {
                echo '<p>';
                                foreach ($resultat as $num)
                                                {
                                                                foreach ($num as $value)
                                                                echo htmlspecialchars($value).'<br />';
                                                }
                echo '</p>';
        }
?>
</body>
</html>

Pour que ça fonctionne tu as juste à remplacer le nom du répertoire de destination par ta valeur, et à copier le code de la classe dans un fichier que tu nomme "Classe_Upload.php" et que tu place dans le même répertoire que ce script.

L'avantage est qu'ensuite tu as très peu de modif à faire pour ajouter des fonctionnalités.

Par exemple tu souhaites redimensionner les images trop grandes en maximum 100 de largeur x 50 de hauteur ?
- Il te suffit d'insérer la ligne $up->Set_Redim ('100','50'); avant la ligne $up->Upload("reload");

Tu veux autoriser l'upload multiples pour les navigateurs qui le supportent (tous les modernes sauf IE) ?
- Ajoutes simplement l'attribut : multiple = "multiple" dans ta balise de type file.
etc.
</pup>

07/09/2011, 22h39
Luke spywoker

C'est sympa de proposer un module(?) php mais je connait pas le langage et j'aimerai garder le contrôle et tout faire moi même. Le traitement serveur sera mis en place de toute façon mais je trouve dommage que l'attribut accept ne fonctionne pas avec tous les navigateurs. Je suis pour dans un future plus ou moins proche qu'il n'existerai plus que un navigateur universel, un seule langage de programmation qui sais tous faire un seule modèle de processeurs et d'ordinateur qui frôlerait la perfection a la place du capitalisme qui n'est pas si mal après tout.