web-dev-qa-db-fra.com

Vérifier le type de fichier lors de la soumission du formulaire?

J'ai le formulaire ayant les champs suivants,

<form onsubmit="return checkcreateform()" action="/gallery/create" method="post" enctype="multipart/form-data">
   <label>Type:*</label>
    <label for="type-1">
     <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
    </label>
   <br>
   <label for="type-2">
   <input type="radio" value="2" id="type-2" name="type">Video
   </label>  
   <label class="itemdetailfloatL required" for="file">File:*</label>
   <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
   <input type="file" tabindex="5" class="text-size text" id="file" name="file">
 <input type="submit" value="Create" id="submit" name="submit">
</form>

Je souhaite valider avant l'envoi du formulaire. Ici, comment puis-je valider si l'utilisateur sélectionne le type comme image et télécharge la vidéo ou sélectionne le type comme vidéo et télécharge l'image?

Nous pouvons y parvenir par javascript ou jquery.Any quick way to validate this?

Veuillez m'aider à ce sujet.

javascriptjqueryhtmlfile-upload
18
mymotherland

Au lieu d'utiliser onsubmit, utilisez le gestionnaire de soumission de jQuery et validez en utilisant du javascript comme celui-ci:

function getExtension(filename) {
    var parts = filename.split('.');
    return parts[parts.length - 1];
}

function isImage(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'jpg':
    case 'gif':
    case 'bmp':
    case 'png':
        //etc
        return true;
    }
    return false;
}

function isVideo(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mpg':
    case 'mp4':
        // etc
        return true;
    }
    return false;
}

$(function() {
    $('form').submit(function() {
        function failValidation(msg) {
            alert(msg); // just an alert for now but you can spice this up later
            return false;
        }

        var file = $('#file');
        var imageChosen = $('#type-1').is(':checked');
        if (imageChosen && !isImage(file.val())) {
            return failValidation('Please select a valid image');
        }
        else if (!imageChosen && !isVideo(file.val())) {
            return failValidation('Please select a valid video file.');
        }

        // success at this point
        // indicate success with alert for now
        alert('Valid file! Here is where you would return true to allow the form to submit normally.');
        return false; // prevent form submitting anyway - remove this in your environment
    });

});

version jsFiddle ici, testée dans IE8, RockMelt (basé sur Chrome) et Firefox 7: http://jsfiddle.net/Ngrbj/4/

50
GregL

La réponse fournie fonctionne, mais quelque chose qui fonctionnera un peu plus rapidement avec beaucoup moins de lignes pour le code de validation, en utilisant les fonctions de tableau javascript:

var extensionLists = {}; //Create an object for all extension lists
extensionLists.video = ['m4v', 'avi','mpg','mp4', 'webm'];  
extensionLists.image = ['jpg', 'gif', 'bmp', 'png'];

// One validation function for all file types    
function isValidFileType(fName, fType) {
    return extensionLists[fType].indexOf(fName.split('.').pop()) > -1;
}

Ensuite, l'instruction if dans le code de soumission est simplement échangée avec:

if (imageChosen && !isValidFileType(file.val(), 'image')) {
        return failValidation('Please select a valid image');
    }
else if (!imageChosen && !isValidFileType(file.val(), 'video')) {
        return failValidation('Please select a valid video file.');
    }
5
Wayne F. Kaskie

Utilisation de la propriété files en entrée: fichier, vous pouvez parcourir les objets fichier et vérifier la propriété type

    $('#upload').on("change", function(){
 
         var  sel_files  = document.getElementById('upload').files;
         var len = sel_files.length;
 
         for (var i = 0; i < len; i++) {

            var file = sel_files[i];
         
            if (!(file.type==='application/pdf')) {
            continue;
            }
          }

      }); 
<div class="modal">
  <form id="form-upload">
    <input type="file" name="upload" id="upload" multiple>
    <br/>
     
</form>
</div>
2
Izabela Skibinska

Chaque type de fichier a une propriété 'type', par exemple: 'image/jpeg', 'audio/mp3' et ainsi de suite ...

Ceci est un exemple d'une façon de vérifier le type du fichier en utilisant la méthode 'match' (de chaînes):

function getFileType(file) {

  if(file.type.match('image.*'))
    return 'image';

  if(file.type.match('video.*'))
    return 'video';

  if(file.type.match('audio.*'))
    return 'audio';

  // etc...

  return 'other';
}

Vous pouvez également l'écrire de manière booléenne:

function isImage(

  return !!file.type.match('image.*');

}
1
Moshe Estroti

vous pouvez essayer ceci:

function getFile(fieldId) {
    var fileInsert = document.getElementById(fieldId).value;
        fileName = fileName.split('/');
        fileName = fileName[fileName.length];
        extentions = fileName.split('.');
        extentions = extentions[extentions.length];
    return extentions;
}

Vous pouvez utiliser cette fonction dans votre checkcreateform()

0
Yoram de Langen

Vous devez d'abord changer votre html comme ceci:

<input type="file" tabindex="5" class="text-size text" id="file" name="file" onchange="checkeExtension(this.value,"submit");">

Ensuite, vous avez besoin d'une fonction comme celle-ci:

///image 1 and video 2
//you can extend file types
var types= {
    'jpg' :"1",
    'avi' :"2",
    'png' :"1",
    "mov" : "2",
}

function checkeExtension(filename,submitId) {
    var re = /\..+$/;
    var ext = filename.match(re);
    var type = $("input[type='radio']:checked").val();
    var submitEl = document.getElementById(submitId);

    if (types[ext] == type) {
        submitEl.disabled = false;
        return true;
    } else {
        alert("Invalid file type, please select another file");
        submitEl.disabled = true;
        return false;
    }  
}
0
erimerturk