Comment créer un type d'entrée = fichier Ne doit accepter que les formats PDF et XL

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 Soumettre, cela doit valider.

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

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

Vous pouvez le faire en utilisant l'attribut accept et en y ajoutant des types 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 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" />

À votre troisième question "Et quand je clique sur les fichiers (PDF / XLS) sur la page Web, ils devraient s'ouvrir automatiquement.":

Vous ne pouvez pas y parvenir. La manière dont un PDF ou XLS est ouvert sur la machine client est définie par l'utilisateur.

vous pouvez utiliser ceci:

HTML

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

support uniquement. PDF et. Fichiers XLS

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

Certains navigateurs prennent en charge l' acceptattribut pour les inputbalises. 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 a cfinputet exécuter une validation pour vérifier l' extension de fichier lors de 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 malicieusement étiqueter les types de fichiers.

ColdFusion cffilepeut vérifier le type mime en utilisant la contentTypepropriété du résultat ( cffile.contentType), mais cela ne peut être fait qu'après le téléchargement. C'est votre meilleur pari, mais ce n'est toujours pas sûr à 100% car les types mime peuvent toujours être erronés.

Vous pouvez utiliser JavaScript. Tenez compte du fait que le gros problème avec JavaScript est de réinitialiser le fichier d'entrée. Eh bien, cela se limite uniquement au JPG (pour PDF, vous devrez changer le 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 cela a été testé sur les dernières versions de Firefox et Chrome, et sur IExplore 10.

Pour une liste complète des types de mime, consultez Wikipedia .

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

Je filtrerais les fichiers côté serveur, car il existe des outils, comme les 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 site serveur, pour être sûr.

Bien que cet exemple particulier concerne un téléchargement de fichiers multiples, 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 sur / download / ce n'est pas une question Javascript - mais plutôt 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.

Si vous souhaitez que le contrôle de téléchargement de fichiers limite les types de fichiers que l'utilisateur peut télécharger en cliquant sur un bouton, c'est la manière.

<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 comme le onClick du bouton ci-dessus, qui ressemble à:

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

Vous pouvez changer cela en: PDFetXLS

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