Laat jquery op file extensie controleren

Door Jop B op 21-06-2016 12:04

2.346 views

Beste Leden,

Ik loop even helemaal vast op het controleren van de file extensie.

Ik krijg steeds return false terug op een of andere manier.
//snelle HTML gemaakt


<input type="file" id="file_field">
<div class="send">Verzend</div>

//Jquery code


$(".send").click(function(e){
var checkfile = $('#file_field').val();
if (validateFile(checkfile)) {
alert ("good");
}else{
alert ("wrong");
e.preventDefault();
}


});

//filter karakters email
function validateFile(checkfile) {
    var filter = /([^s]+(?=.(jpg|gif|png)).2)/gm;
    if (filter.test(checkfile)) {
        return true;
    }
    else {
        return false;
    }
    }

Iemand een idee?

Gr. Jop

Inter Kode

21-06-2016 12:26

var file = $('#file').prop('files')[0];
var extension = file['name'].replace(/^.*\./, '');
if (extension != 'txt') {
alert('Only text files are allowed (.txt).');
return false;
}

Werkt prima :-)

Jop B

21-06-2016 12:39

@Inter Kode
Dit is alleen een txt file, wat mist er in mijn code dat jquery ziet dat het een file is en deze vergelijkt?
Ik denk dat het probleem in de variabele zit, ik heb daar .val() gebruikt maar er is helemaal geen value aanwezig.
Er moet dus iets staan dat het om een file gaat, maar wat?

Thomas van den Heuvel

21-06-2016 13:33

Uploadvelden zijn deels het domein van het OS/de browser geloof ik? Daar kom je dus niet zo makkelijk aan. Daarnaast kun je dit soort controles makkelijk omzeilen door JavaScript uit te schakelen.

Ik zou eerder inzetten op een serverside oplossing.

De vraag is ook, wat probeer je uiteindelijk te bereiken? Dat er enkel afbeeldingen (van een zeker type) worden geupload? Dan zou ik daar op controleren. En niet via extensie, want dat is een slechte graadmeter.

Wanneer ik blaat.txt hernoem naar blaat.jpg dan upload elke (?) browser dat vrolijk als image/jpeg. Je zult zo'n bestand dus net wat verder aan de tand moeten voelen dan enkel de extensie. Bijvoorbeeld met getimagesize() ofzo. Als deze false retourneert weet je in ieder geval vrij zeker dat je niet met een afbeelding van doen hebt.

Jop B

21-06-2016 19:08

@thomas,

Dank voor de heldere reactie :)
Wat ik wil bereiken is dat jquery voordat er gepost word al een tip geeft over de extentie.
Bij de text input heb ik mijn tooltips helemaal klaar alleen met deze input "type file" wil het niet lukken.

Wat zou een oplossing kunnen zijn zodat er een true false ontstaat?
Het gaat om jpg, png, tiff en gif.
De eind controle komt later bij de submit ;)

Gr. Jop

Thomas van den Heuvel

22-06-2016 15:11 gewijzigd op 22-06-2016 15:32

Volgens mij kun je dit in native JavaScript oplossen:

function hasAllowedExtension(file, extensions) {
    return extensions.indexOf(file.split('.').pop()) > -1;
}

Aanroep:

if (hasAllowedExtension('whatever.txt', ['jpg', 'png', 'gif'])) {
    // ok
} else {
    // nok
}

Overigens vindt IE een div als submitbutton niet leuk. Beter is wellicht een button-tag met type="submit".

NB: is case sensitive, maar je kunt de lijst van extensies natuurlijk altijd uitbreiden (of ergens een "strtolower" ding tussenfrommelen).

Reageren

Inloggen om te reageren