Comment jQuery peut-il restreindre les types de fichiers lors du téléchargement?

Vous pouvez obtenir la valeur d'un champ de fichier de la même manière que n'importe quel autre champ. Vous ne pouvez cependant pas le modifier.

Donc pour vérifier superficiellement si un fichier a la bonne extension, vous pouvez faire quelque chose comme ceci:

 var ext = $('#my_file_field').val().split('.').pop().toLowerCase(); if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) { alert('invalid extension!'); } 

Aucun plugin n'est nécessaire pour cette tâche. Cobbled ceci ensemble d'un couple d'autres scripts:

 $('INPUT[type="file"]').change(function () { var ext = this.value.match(/\.(.+)$/)[1]; switch (ext) { case 'jpg': case 'jpeg': case 'png': case 'gif': $('#uploadButton').attr('disabled', false); break; default: alert('This is not an allowed file type.'); this.value = ''; } }); 

L'astuce consiste à régler le bouton de téléchargement sur désactivé à moins et jusqu'à ce qu'un type de fichier valide soit sélectionné.

Vous pouvez utiliser le plugin de validation de jQuery: http://docs.jquery.com/Plugins/Validation

Il arrive d'avoir une règle accept () qui fait exactement ce dont vous avez besoin: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Notez que le contrôle de l'extension de fichier n'est pas une preuve de balle car il n'est en aucun cas lié au type mimétique du fichier. Ainsi, vous pourriez avoir un .png, un document Word et un .doc, une image png parfaitement valide. N'oubliez pas de faire plus de contrôles sur le serveur;)

Ne voulez-vous pas vérifier plutôt sur MIME que sur n'importe quelle étendue que l'utilisateur ment? Si c'est le cas, c'est moins d'une ligne:

 <input type="file" id="userfile" accept="image/*|video/*" required /> 

Pour le front-end, il est très pratique de mettre l'attribut ' accept ' si vous utilisez un champ de fichier.

Exemple:

 <input id="file" type="file" name="file" size="30" accept="image/jpg,image/png,image/jpeg,image/gif" /> 

Quelques notes importantes:

• L'attribut accept est pris en charge dans Internet Explorer 10, Firefox, Opera, Chrome et Safari 6.
• Il affichera le texte pour l'extension de fichier différemment dans la boîte de dialogue du navigateur de fichiers de différents navigateurs.

Pour mon cas, j'ai utilisé les codes suivants:

  if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) { alert('You must select an image file only'); } 

J'essaie d'écrire un exemple de code de travail, je le teste et tout fonctionne.

Hare est un code:

HTML:

 <input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" /> 

Javascript:

  //function for check attachment size and extention match function checkFileSize(element, maxSize, extentionsArray) { var val = $(element).val(); //get file value var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention if ($.inArray(ext, extentionsArray) == -1) { alert('false extension!'); } var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB if (fileSize > maxSize) { alert("Large file");// if Maxsize from Model > real file size alert this } } 

Ce code fonctionne bien, mais le seul problème est que si le format de fichier est différent des options spécifiées, il affiche un message d'alerte, mais il affiche le nom du fichier alors qu'il devrait négliger celui-ci.

 $('#ff2').change( function () { var fileExtension = ['jpeg', 'jpg', 'pdf']; if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { alert("Only '.jpeg','.jpg','.pdf' formats are allowed."); return false; } }); 

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="submit" value="Upload" /> </form> <script> $('input[type=file]').change(function(){ var file = this.files[0]; name = file.name; size = file.size; type = file.type; //your validation }); </script> 

Si vous rencontrez plusieurs téléchargements de fichiers (html 5), j'ai pris le meilleur commentaire suggéré et l'ai modifié un peu:

  var files = $('#file1')[0].files; var len = $('#file1').get(0).files.length; for (var i = 0; i < len; i++) { f = files[i]; var ext = f.name.split('.').pop().toLowerCase(); if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) { alert('invalid extension!'); } } 

Cet exemple permet de télécharger uniquement l'image PNG.

HTML

 <input type="file" class="form-control" id="FileUpload1" accept="image/png" /> 

JS

 $('#FileUpload1').change( function () { var fileExtension = ['png']; if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { alert("Only '.png' format is allowed."); this.value = ''; // Clean field return false; } }); 

 function validateFileExtensions(){ var validFileExtensions = ["jpg", "jpeg", "gif", "png"]; var fileErrors = new Array(); $( "input:file").each(function(){ var file = $(this).value; var ext = file.split('.').pop(); if( $.inArray( ext, validFileExtensions ) == -1) { fileErrors.push(file); } }); if( fileErrors.length > 0 ){ var errorContainer = $("#validation-errors"); for(var i=0; i < fileErrors.length; i++){ errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>'); } return false; } return true; } 

Voici un code simple pour la validation javascript, et après qu'il valide, il nettoiera le fichier d'entrée.

 <input type="file" id="image" accept="image/*" onChange="validate(this.value)"/> function validate(file) { var ext = file.split("."); ext = ext[ext.length-1].toLowerCase(); var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"]; if (arrayExtensions.lastIndexOf(ext) == -1) { alert("Wrong extension type."); $("#image").val(""); } }