Comment faire en sorte que le type d'entrée = fichier n'accepte que les fichiers pdf et xls ?

Question

J'ai utilisé <input type= "file" name="Upload" >

Je voudrais maintenant restreindre cette possibilité en n'acceptant que les fichiers .pdf et .xls.

Lorsque je clique sur le bouton d'envoi, il devrait valider ceci.

Et lorsque je clique sur les fichiers (PDF/XLS) sur la page web, ils devraient s'ouvrir automatiquement.

Quelqu'un pourrait-il donner des exemples à ce sujet ?

Answer 1

Vous pouvez le faire en utilisant l'attribut accept et en y ajoutant les types de mime autorisés. Mais tous les navigateurs ne respectent pas cet attribut et il pourrait facilement être supprimé via un inspecteur de code. Dans les deux cas, vous devez donc vérifier le type de fichier du côté du serveur (votre deuxième question).

Exemple :

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

Pour répondre à votre troisième question "Et lorsque je clique sur les fichiers (PDF/XLS) sur la page web, ils doivent s'ouvrir automatiquement" :

Vous ne pouvez pas y arriver. Le mode d'ouverture d'un PDF ou d'un XLS sur le poste client est défini par l'utilisateur.

Answer 2

Vous pouvez utiliser ceci :

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

soutien uniquement . PDF et . XLS fichiers

Answer 3

Malheureusement, il n'y a pas de moyen garanti de le faire au moment de la sélection.

Quelques Les navigateurs prennent en charge le accept attribut pour input tags. C'est un bon début, mais on ne peut pas s'y fier complètement.

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

Vous pouvez utiliser un cfinput et lancer une validation pour vérifier le fichier extension lors de la soumission, mais pas le type de mime. C'est mieux, mais pas encore infaillible. Les fichiers sur OSX n'ont souvent pas d'extension de fichier ou les utilisateurs pourraient malencontreusement mal étiqueter les types de fichiers.

ColdFusion cffile peut vérifier le mime-type en utilisant la fonction contentType du résultat ( cffile.contentType ), mais cela ne peut se faire que après le téléchargement. C'est la meilleure solution, mais elle n'est pas sûre à 100 % car les types de mime peuvent encore être erronés.

Answer 4

Vous pouvez essayer la méthode suivante

<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

OR (dans asp.net mvc)

@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })

Answer 5

Vous pourriez utiliser JavaScript. Prenez en considération le fait que le gros problème de faire cela avec JavaScript est de réinitialiser le fichier d'entrée. Eh bien, cela ne se limite qu'au JPG (pour le PDF, vous devrez modifier le paramètre type de mime et le nombre magique ) :

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Tenez compte du fait que ces tests ont été effectués sur les dernières versions de Firefox et de Chrome, ainsi que sur IExplore 10.

Pour une liste complète des types de mime, voir Wikipédia. .

Pour une liste complète des nombres magiques, voir Wikipedia .