Validation de l'extension du fichier avant le téléchargement du fichier
Je télécharge des images sur une servlet. La validation du fait que le fichier téléchargé est une image est effectuée côté serveur uniquement, en vérifiant les nombres magiques dans l'en-tête du fichier. Existe-t-il un moyen de valider les extensions côté client avant de soumettre le formulaire à servlet? Dès que je frappe, il commence le téléchargement.
J'utilise Javascript et jQuery côté client.
Mise à jour: J'ai finalement eu la validation côté serveur qui lit les octets et refuse le téléchargement si ce n'est pas une image.
Il est possible de vérifier uniquement l'extension du fichier, mais l'utilisateur peut facilement renommer virus.exe en virus.jpg et "passer" la validation.
Voici ce qu'il faut faire pour vérifier l'extension du fichier et abandonner l'opération si celle-ci ne correspond à aucune des extensions valides: (choisissez un fichier non valide et essayez de le soumettre pour voir l'alerte en action)
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}<form onsubmit="return Validate(this);">
File: <input type="file" name="my file" /><br />
<input type="submit" value="Submit" />
</form>Notez que le code permettra à l'utilisateur d'envoyer sans choisir le fichier ... si nécessaire, supprimez la ligne if (sFileName.length > 0) { et son crochet de fermeture associé. Le code validera tout fichier saisi dans le formulaire, quel que soit son nom.
Cela peut être fait avec jQuery en moins de lignes, mais je suis assez à l'aise avec le JavaScript "brut" et le résultat final est le même.
Si vous avez plus de fichiers ou souhaitez déclencher la vérification lors de la modification du fichier et pas seulement lors de la soumission du formulaire, utilisez ce code à la place:
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />Cela affichera une alerte et réinitialisera l'entrée en cas d'extension de fichier invalide.
Aucune des réponses existantes ne semblait assez compacte pour la simplicité de la demande. Vérifier si un champ de saisie de fichier donné a une extension d'un jeu peut être accompli comme suit:
function hasExtension(inputID, exts) {
var fileName = document.getElementById(inputID).value;
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}
Ainsi, un exemple d'utilisation pourrait être (où upload est le id d'une entrée de fichier):
if (!hasExtension('upload', ['.jpg', '.gif', '.png']) {
// ... block upload
}
Ou comme un plugin jQuery:
$.fn.hasExtension = function(exts) {
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}
Exemple d'utilisation:
if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
// ... block upload
}
La .replace(/\./g, '\\.') est là pour échapper au point de l'expression rationnelle, afin que les extensions de base puissent être passées sans que les points ne correspondent à aucun caractère.
Il n'y a pas d'erreur de vérification sur ceux-ci pour les garder courts, probablement si vous les utilisez, vous vous assurez que l'entrée existe en premier et que le tableau d'extensions est valide!
$(function () {
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase(),
regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");
if (!(regex.test(val))) {
$(this).val('');
alert('Please select correct file format');
}
});
});
Je suis venu ici parce que j'étais sûr qu'aucune des réponses ici n'était assez ... poétique:
function checkextension() {
var file = document.querySelector("#fUpload");
if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}<input type="file" id="fUpload" onchange="checkextension()"/>vérifier que si le fichier est sélectionné ou non
if (document.myform.elements["filefield"].value == "")
{
alert("You forgot to attach file!");
document.myform.elements["filefield"].focus();
return false;
}
vérifier l'extension du fichier
var res_field = document.myform.elements["filefield"].value;
var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
if (res_field.length > 0)
{
if (allowedExtensions.indexOf(extension) === -1)
{
alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
return false;
}
}
J'aime cet exemple:
<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />
<script language="javascript" type="text/javascript">
function ValidateFileUpload(Source, args) {
var fuData = document.getElementById('<%= fpImages.ClientID %>');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
// There is no file selected
args.IsValid = false;
}
else {
var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
args.IsValid = true; // Valid file type
FileUploadPath == '';
}
else {
args.IsValid = false; // Not valid file type
}
}
}
</script>
Si vous avez besoin de tester des URL distantes dans un champ de saisie, vous pouvez essayer de tester une expression rationnelle simple avec les types qui vous intéressent.
$input_field = $('.js-input-field-class');
if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
$('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
return false;
}
Ceci capturera n'importe quoi fin en .gif, .jpg, .jpeg, .tiff ou .png
Il convient de noter que certains sites populaires tels que Twitter ajoutent un attribut de taille à la fin de leurs images. Par exemple, les tests suivants échoueraient à ce test même s'il s'agissait d'un type d'image valide:
https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large
Pour cette raison, ce n'est pas une solution parfaite. Mais cela vous mènera à environ 90% du chemin.
essayez ceci (fonctionne pour moi)
function validate(){
var file= form.file.value;
var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
if(!file.match(reg))
{
alert("Invalid File");
return false;
}
}<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>
Utilisez-vous le type d’entrée = "fichier" pour choisir les fichiers de téléchargement? si oui, pourquoi ne pas utiliser l'attribut accept?
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
[Manuscrit]
uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];
// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
return val === uploadedFileType;
});
Voici un moyen plus réutilisable, en supposant que vous utilisiez jQuery
Fonction de bibliothèque (ne nécessite pas jQuery):
function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
if (required == false && stringToCheck.length == 0) { return true; }
for (var i = 0; i < acceptableExtensionsArray.length; i++) {
if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
}
return false;
}
String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }
String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }
Fonction de page (nécessite jQuery (à peine)):
$("[id*='btnSaveForm']").click(function () {
if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
alert("Photo only allows file types of PNG, JPG and BMP.");
return false;
}
return true;
});
Vous pouvez utiliser l'attribut accept disponible pour les types de fichiers en entrée. Checkout MDN documentation
Vous pouvez créer un tableau qui inclut le type de fichier requis et utiliser $ .inArray () dans jQuery pour vérifier si le type de fichier existe dans le tableau.
var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
// Given that file is a file object and file.type is string
// like "image/jpeg", "image/png", or "image/gif" and so on...
if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
console.log('Not an image type');
}
Lorsque vous souhaitez valider le bouton de navigation et l’extension de fichier, utilisez ce code:
function fileValidate(){
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file in .pdf extension ");
enableAll();
return false;
}
Voici comment cela se fait dans jQuery
$("#artifact_form").submit(function(){
return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
});
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br /><script type="text/javascript">
function file_upload() {
var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
if (imgpath == "") {
alert("Upload your Photo...");
document.file.Word.focus();
return false;
}
else {
// code to get File Extension..
var arr1 = new Array;
arr1 = imgpath.split("\\");
var len = arr1.length;
var img1 = arr1[len - 1];
var filext = img1.substring(img1.lastIndexOf(".") + 1);
// Checking Extension
if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
alert("Successfully Uploaded...")
return false;
}
else {
alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
document.form.Word.focus();
return false;
}
}
}
function Doc_upload() {
var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
if (imgpath == "") {
alert("Upload Agreement...");
document.file.Word.focus();
return false;
}
else {
// code to get File Extension..
var arr1 = new Array;
arr1 = imgpath.split("\\");
var len = arr1.length;
var img1 = arr1[len - 1];
var filext = img1.substring(img1.lastIndexOf(".") + 1);
// Checking Extension
if (filext == "txt" || filext == "pdf" || filext == "doc") {
alert("Successfully Uploaded...")
return false;
}
else {
alert("Upload File with Extension ' txt , pdf , doc '");
document.form.Word.focus();
return false;
}
}
}
</script>