web-dev-qa-db-fra.com

Comment faire input type = file Devrait accepter uniquement les formats pdf et xls

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

Maintenant, je voudrais limiter cela en acceptant uniquement les fichiers .pdf et .xls.

Lorsque je clique sur le bouton d'envoi, il devrait être validé.

Et lorsque je clique sur les fichiers (PDF/XLS) sur une page Web, il devrait s'ouvrir automatiquement.

Quelqu'un pourrait-il s'il vous plaît donner quelques exemples pour cela?

htmlforms
50
Manikandan

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

Exemple:

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

Pour votre troisième question "Et quand je clique sur les fichiers (PDF/XLS) sur la page Web, il devrait s'ouvrir automatiquement":

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

118
feeela

vous pouvez utiliser ceci:

HTML

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

support seulement .PDFet .XLSfichiers

18
Radames E. Hernandez

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

Certains navigateurs prennent en charge l'attribut accept pour les balises input. 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 une variable cfinput et exécuter une validation pour vérifier le fichier extension à la soumission, mais pas le type mime. C'est mieux, mais toujours pas infaillible. Les fichiers sur OSX n’ont souvent aucune extension de fichier ou les utilisateurs peuvent mal étiqueter les types de fichiers.

La variable cffile de ColdFusion peut vérifier le type mime à l'aide de la propriété contentType du résultat (cffile.contentType), mais cela ne peut être fait que après le téléchargement. C’est votre meilleur pari, mais n’est toujours pas sûr à 100%, car les types de mime pourraient toujours être faux.

9
Joe C

Vous pouvez utiliser JavaScript. Notez que le gros problème avec JavaScript est de réinitialiser le fichier d’entrée. Eh bien, cela se limite à JPG (pour PDF vous devrez changer le type mime et le nombre magic ):

<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>

Notez que cela a été testé sur les dernières versions de Firefox et Chrome, et sur IExplore 10.

Pour une liste complète des types MIME, voir Wikipedia .

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

2
lmiguelmh

Bien que cet exemple particulier concerne le téléchargement de plusieurs fichiers, il donne les informations générales dont on a besoin:

https://developer.mozilla.org/en-US/docs/DOM/File.type

Pour ce qui est d’agir sur un fichier lors de/download /, ce n’est pas une question Javascript, mais une configuration de serveur. Si un utilisateur n'a pas installé quelque chose pour ouvrir les fichiers PDF ou XLS, son seul choix sera de les télécharger.

1
Jeremy J Starcher

Je filtrerais les fichiers côté serveur, car il existe des outils, tels que Live HTTP Headers sur Firefox, qui permettraient de télécharger n'importe quel fichier, y compris un shell. Les gens pourraient pirater votre site. Faites-le sur le site du serveur, pour être sûr.

1
Alexandre Hitchcox

Si vous souhaitez que le contrôle de téléchargement de fichier limite les types de fichiers que l'utilisateur peut télécharger en cliquant sur un bouton, vous êtes au bon endroit.

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

Vous pouvez ensuite appeler la fonction à partir d'un événement tel que le clic sur le bouton ci-dessus, qui ressemble à ceci:

onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

Vous pouvez changer ceci en: PDF et XLS

Vous pouvez le voir implémenté ici: Démo

0
Vishal Suthar