?'/> ?'/> ?'/> Limiter le format de fichier lors de l'utilisation de <input type = "file">? | abulletproofidea.com

Question Limiter le format de fichier lors de l'utilisation de ?


Je voudrais restreindre le type de fichier qui peut être choisi dans le sélecteur de fichier du système d'exploitation natif lorsque l'utilisateur clique sur le bouton Parcourir dans le <input type="file"> élément en HTML. J'ai l'impression que c'est impossible, mais j'aimerais savoir si est une solution. Je voudrais rester uniquement en HTML et JavaScript; non Flash s'il vous plaît.


436
2017-12-01 20:44


origine


Réponses:


Strictement parlant, la réponse est non. Le développeur ne peux pas empêche l'utilisateur de choisir des fichiers de tout type ou extension dans la boîte de dialogue de sélection de fichier de système d'exploitation natif.

Mais encore, le Acceptez attribut de <input type = "file"> peut aider à fournir un filtre dans la boîte de dialogue de sélection de fichier du système d'exploitation. Par exemple,

<!-- (IE 10+, Edge, Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

devrait fournir un moyen de filtrer les fichiers autres que .xls ou .xlsx. Bien que le MDN page pour input élément a toujours dit qu'il supporte cela, à ma grande surprise, cela n'a pas fonctionné pour moi dans Firefox jusqu'à la version 42. Cela fonctionne dans IE 10+, Edge, et Chrome.

Donc, pour supporter Firefox de plus de 42 ans avec IE 10+, Edge, Chrome et Opera, je suppose qu'il est préférable d'utiliser une liste de types MIME séparés par des virgules:

<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[Bord comportement: la liste déroulante du filtre de type de fichier affiche les types de fichiers mentionnés ici, mais n'est pas la valeur par défaut dans la liste déroulante. Le filtre par défaut est All files (*).]

Vous pouvez également utiliser des astérisques dans les types MIME. Par exemple:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C recommande auteurs pour spécifier à la fois les types MIME et les extensions correspondantes accept attribut. Alors le meilleur approche est:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSfiddle du même: ici.

Référence:  Liste des types MIME

IMPORTANT: L'utilisation de l'attribut accept permet uniquement de filtrer les fichiers de types qui ne vous intéressent pas. Les navigateurs permettent toujours aux utilisateurs de choisir des fichiers de n'importe quel type. Des vérifications supplémentaires (côté client) devraient être effectuées (en utilisant JavaScript, un moyen serait ce), et certainement les types de fichiers DOIT être vérifié sur le serveur, en utilisant une combinaison de type MIME en utilisant à la fois l'extension de fichier et sa signature binaire (ASP.NET, PHP, Rubis, Java). Vous pouvez également vous référer à celles-ci  les tables pour les types de fichiers et leur nombres magiques, pour effectuer une vérification côté serveur plus robuste.

Voici Trois  bien  lit sur les téléchargements de fichiers et la sécurité.

MODIFIER:  La vérification de type de fichier à l'aide de sa signature binaire peut également être effectuée du côté client en utilisant JavaScript (plutôt que simplement en regardant l'extension) à l'aide de l'API de fichiers HTML5, mais le fichier doit être vérifié sur le serveur. toujours être en mesure de télécharger des fichiers en faisant une requête HTTP personnalisée.


711
2018-05-16 23:54



Il y a l'attribut accept pour l'étiquette d'entrée. Cependant, il n’est en aucun cas fiable. Les navigateurs le traitent très probablement comme une "suggestion", ce qui signifie que l'utilisateur aura, selon le gestionnaire de fichiers, une présélection qui n'affiche que les types désirés. Ils peuvent toujours choisir "tous les fichiers" et télécharger n'importe quel fichier.

Exemple:

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

lire plus dans le html5 spec

Gardez à l'esprit qu'il ne doit être utilisé que comme une "aide" pour que l'utilisateur puisse trouver les bons fichiers. chaque utilisateur peut envoyer n'importe quelle demande qu'il / elle veut à votre serveur. il faut toujours tout valider côté serveur.

Donc, la réponse est: non toi ne peut pas restreindre, mais toi pouvez mettre une pré-sélection mais vous ne peux pas compter sur lui.

Alternativement ou en plus, vous pouvez faire quelque chose de similaire en vérifiant le nom de fichier (valeur du champ de saisie) avec JavaScript, mais cela n'a aucun sens car il n'offre aucune protection et ne facilite pas la sélection pour l'utilisateur. Il ne fait que tromper potentiellement un webmaster en pensant qu'il est protégé et ouvre un trou de sécurité. Cela peut être une douleur dans le cul pour les utilisateurs qui ont des extensions de fichiers alternatives (par exemple jpeg au lieu de jpg), majuscules, ou aucune extension de fichier que ce soit (comme c'est commun sur les systèmes Linux).


177
2017-12-01 20:51



Vous pouvez utiliser le change événement pour surveiller ce que l'utilisateur sélectionne et les informer à ce stade que le fichier n'est pas acceptable. Il ne limite pas la liste réelle des fichiers affichés, mais il est le plus proche que vous pouvez faire côté client, en dehors de la prise en charge mal prise en charge. accept attribut.

var file = document.getElementById('someId');

file.onchange = function(e){
    var ext = this.value.match(/\.([^\.]+)$/)[1];
    switch(ext)
    {
        case 'jpg':
        case 'bmp':
        case 'png':
        case 'tif':
            alert('allowed');
            break;
        default:
            alert('not allowed');
            this.value='';
    }
};

exemple à http://www.jsfiddle.net/gaby/7br93/1/


73
2017-12-01 21:01



Oui, tu as raison. C'est impossible avec HTML. L'utilisateur sera en mesure de choisir le fichier qu'il veut.

Vous pourriez écrire un morceau de JavaScript code pour éviter de soumettre un fichier en fonction de son extension. Mais gardez à l'esprit que cela n'empêchera en aucun cas un utilisateur malveillant de soumettre un fichier qu'il souhaite réellement.

Quelque chose comme:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

Code HTML:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

44
2017-12-01 20:47



Techniquement, vous pouvez spécifier le accept attribut (alternative dans html5) sur le input élément, mais il n'est pas correctement pris en charge.


17
2017-12-01 20:55



Utilisation input tag avec accept attribut

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Cliquez sur ici pour la dernière table de compatibilité de navigateur 

Démonstration en direct ici

Pour sélectionner uniquement les fichiers image, vous pouvez utiliser cette accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Démonstration en direct ici

Only gif, jpg and png will be shown, screen grab from Chrome version 44 Seuls gif, jpg et png seront affichés, capture d'écran de la version 44 de Chrome


8
2017-12-31 05:26



Je sais que c'est un peu tard.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

7
2017-08-10 15:54



Vous pouvez en fait le faire avec javascript mais rappelez-vous que js est côté client, donc vous seriez réellement "avertir les utilisateurs" du type de fichiers qu'ils peuvent télécharger, si vous voulez ÉVITER (restreindre ou limiter comme vous l'avez dit) certains types de fichiers faites-le côté serveur.

Regarder ce tut de base si vous souhaitez commencer avec la validation côté serveur. Pour la visite complète du tutoriel cette page.

Bonne chance!


5
2017-12-01 20:54



Comme mentionné dans les réponses précédentes, nous ne pouvons pas empêcher l'utilisateur de sélectionner des fichiers pour des formats de fichiers donnés seulement. Mais c'est très pratique d'utiliser la balise accept sur l'attribut de fichier en html.

En ce qui concerne la validation, nous devons le faire du côté serveur. Nous pouvons également le faire du côté client en js mais ce n'est pas une solution infaillible. Nous devons valider côté serveur.

Pour ces exigences, je préfère vraiment struts2 framework de développement d'applications web Java. Avec sa fonctionnalité de téléchargement de fichiers intégrée, télécharger des fichiers sur des applications Web basées sur struts2 est un jeu d'enfant. Mentionnez simplement les formats de fichiers que nous aimerions accepter dans notre application et tout le reste est pris en charge par le noyau même du framework. Vous pouvez le vérifier sur le site officiel de Struts.


2
2018-05-10 08:36