Validare l'estensione dei file per l'upload è un compito che jQuery svolge agevolmente. Vediamo insieme i dettagli di questa soluzione.
Dobbiamo semplicemente estrarre l'estensione del file dal campo di input e confrontarla con una white list di estensioni ammesse. Per esempio, dato il seguente form che accetta solo file JPEG:
<form action="#" method="post" enctype="multipart/form-data">
<div>
<label for="image">Upload image (JPEG only)</label>
<input type="file" name="image" id="image" />
</div>
</form>
possiamo definire il seguente plugin:
(function($) {
$.fn.checkFileType = function(options) {
var defaults = {
allowedExtensions: [],
success: function() {},
error: function() {}
};
options = $.extend(defaults, options);
return this.each(function() {
$(this).on('change', function() {
var value = $(this).val(),
file = value.toLowerCase(),
extension = file.substring(file.lastIndexOf('.') + 1);
if ($.inArray(extension, options.allowedExtensions) == -1) {
options.error();
$(this).focus();
} else {
options.success();
}
});
});
};
})(jQuery);
Nel nostro caso le estensioni saranno jpg
e jpeg
:
$(function() {
$('#image').checkFileType({
allowedExtensions: ['jpg', 'jpeg'],
success: function() {
alert('Success');
},
error: function() {
alert('Error');
}
});
});