jquery – Vérifie l’extension du fichier avant le téléchargement

Si vous voulez le faire sans plugin, vous pouvez utiliser ce qui suit.

Javascript, en utilisant jQuery:

$(document).ready( function (){ $("#your_form").submit( function(submitEvent) { // get the file name, possibly with path (depends on browser) var filename = $("#file_input").val(); // Use a regular expression to sortingm everything before final dot var extension = filename.replace(/^.*\./, ''); // Iff there is no dot anywhere in filename, we would have extension == filename, // so we account for this possibility now if (extension == filename) { extension = ''; } else { // if there is an extension, we convert to lower case // (NB this conversion will not effect the value of the extension // on the file upload.) extension = extension.toLowerCase(); } switch (extension) { case 'jpg': case 'jpeg': case 'png': alert("it's got an extension which suggests it's a PNG or JPG image (but NB that's only its name, so let's be sure that we, say, check the mime-type server-side!)"); // uncomment the next line to allow the form to submitted in this case: // break; default: // Cancel the form submission submitEvent.preventDefault(); } }); }); 

HTML:

Vous pouvez y parvenir en utilisant JQuery

HTML

JQuery

  $("#FilUploader").change(function () { var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { alert("Only formats are allowed : "+fileExtension.join(', ')); } }); 

Pour plus d’infos cliquez ici

Je voudrais remercier la personne qui a posté la réponse, mais il a supprimé le message. Nous pouvons le faire comme ça.

 $("#yourElem").uploadify({ 'uploader': ..., 'script': ... 'fileExt' : '*.jpg;*.gif;', //add allowed extensions ....., 'onSelect': function(e, q, f) { var validExtensions = ['jpg','gif']; //array of valid extensions var fileName = f.name; var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1); if ($.inArray(fileNameExt, validExtensions) == -1){ alert("Invalid file type"); $("#yourElem").uploadifyCancel(q); return false; } } }); 

Merci pour la réponse, cela a vraiment fonctionné …

Voici un code simple pour la validation javascript, et après l’avoir validé, il nettoiera le fichier d’entrée.

  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(""); } } 

Si vous ne voulez pas utiliser $(this).val() , vous pouvez essayer:

 var file_onchange = function () { var input = this; // avoid using 'this' directly if (input.files && input.files[0]) { var type = input.files[0].type; // image/jpg, image/png, image/jpeg... // allow jpg, png, jpeg, bmp, gif, ico var type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico)$/; if (type_reg.test(type)) { // file is ready to upload } else { alert('This file type is unsupported.'); } } }; $('#file').on('change', file_onchange); 

J’espère que cela t’aides!

Le code suivant permet de télécharger des fichiers gif, png, jpg, jpeg et bmp.

 var extension = $('#your_file_id').val().split('.').pop().toLowerCase(); if($.inArray(extension, ['gif','png','jpg','jpeg','bmp']) == -1) { alert('Sorry, invalid extension.'); return false; } 

  function yourfunctionName() { var yourFileName = $("#yourinputfieldis").val(); var yourFileExtension = yourFileName .replace(/^.*\./, ''); switch (yourFileExtension ) { case 'pdf': case 'jpg': case 'doc': $("#formId").submit();// your condition what you want to do break; default: alert('your File extension is wrong.'); this.value = ''; } } 

        
 
 File Upload  
 
   

Voici la réponse complète pour vérifier la taille du fichier et son extension. Ceci utilisait le champ de saisie de fichier par défaut et la bibliothèque jQuery. Exemple de travail: https://jsfiddle.net/9pfjq6zr/2/