Vérifier le type de fichier de formulaire soumettre?

J'ai le formulaire d'avoir 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 veux valider avant de soumettre le formulaire. Voici comment puis-je valider si l'utilisateur sélectionnez le type d'Image et upload de la vidéo ou sélectionnez le type de vidéo et de téléchargement de l'image ?

Nous pouvons atteindre cet objectif en javascript ou jquery.Tout moyen rapide pour valider cette ?

De bien vouloir m'aider sur ce point.

InformationsquelleAutor mymotherland | 2011-11-02
  1. 50

    Au lieu d'utiliser onsubmit, l'utilisation de jQuery gestionnaire de soumission, et de valider à l'aide de javascript comme suit:

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

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

    • l'utilisateur peut facilement changer l'extension du fichier "fou", cette validation, une solution basée sur le type mime serait mieux (mais, je ne sais pas si elle existe toujours à la recherche de moi-même)
    • voir stackoverflow.com/questions/7395548/...
    • getExtension peut être une ligne en faisant "retour nom de fichier.split('.').pop();"
    • on peut facilement changer l'extension du fichier et passer à travers cette
    • Correct. Ce n'est pas infaillible. Cette réponse a été écrit avant d'avoir accès au Fichier API pour lire le contenu de fichiers (ce qui n'est pas encore une option pour la prise en charge des navigateurs plus anciens). Peu importe ce que JS solution que vous utilisez, vous voulez toujours vérifier sur le serveur en tant que bien. Pas de la validation côté client jamais remplace la validation côté serveur.
    • vous pouvez modifier la getExtension(filename) à un paquebot return filename.split('.').pop() ou mieux, si return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
    • mimetype peut encore se laisser berner en changeant juste une extension

    InformationsquelleAutor GregL
  2. 5

    La réponse fournie fonctionne, mais quelque chose qui va courir un peu plus vite, avec beaucoup moins de lignes de code validation, à l'aide de javascript les fonctions de tableau:

    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 la soumettre code est remplacé par: 

    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.');
}
    InformationsquelleAutor Wayne F. Kaskie
  3. 2

    À l'aide de fichiers de propriété sur entrée:fichier vous pouvez faire une boucle à travers les objets de fichier et vérifier le type de la propriété

    JS:

        $('#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;
}
}
});

    HTML:

    <div class="modal">
<form id="form-upload">
<input type="file" name="upload" id="upload" multiple>
<br/>
</form>
</div>

    InformationsquelleAutor Izabela Skibinska
  4. 0

    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()

    InformationsquelleAutor Yoram de Langen
  5. 0

    D'abord, vous devez modifier votre code 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 ceci:

    ///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;
}  
}
    InformationsquelleAutor erimerturk
  6. 0

    Chaque type de Fichier a un "type" de la propriété, par exemple: 'image/jpeg', "audio/mp3" et ainsi de suite...

    C'est un exemple pour une façon de vérifier le type de fichier en utilisant le 'match' de la méthode (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 écrire le booléen façon:

    function isImage(
return !!file.type.match('image.*');
}
    • Pouvez-vous ajouter des informations aidant à l'affiche originale de savoir où accrocher dans votre fonction, et où le définir?
    InformationsquelleAutor Moshe Estroti