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

Je filtrerais les fichiers côté serveur, car il existe des outils, comme Live HTTP Headers sur Firefox, qui permettent 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.

Answer 2

Si vous voulez 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, alors c'est la façon

<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 à ceci :

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

Vous pouvez le changer en : PDF y XLS

Vous pouvez le voir mis en œuvre ici : Démo

Answer 3

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 du téléchargement, ce n'est pas une question de Javascript, mais plutôt une configuration du 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.

Answer 4

Essayez celui-là.

              <MyTextField
                id="originalFileName"
                type="file"
                inputProps={{ accept: '.xlsx, .xls, .pdf' }}
                required
                label="Document"
                name="originalFileName"
                onChange={e => this.handleFileRead(e)}
                size="small"
                variant="standard"
              />