Vérifiez l'extension de fichier et alertez l'utilisateur si ce n'est pas un fichier image

J'ai besoin d'aide pour ajouter quelques lignes de code pour vérifier le fichier est une image, pour vérifier l'extension. C'est mon code que j'utilise pour indiquer la progression du téléchargement des images. - Je le faire en php et l'utilisateur ne peut pas télécharger un fichier à part .jpg .jpeg .gif et .png, mais il n'a pas obtenez un message indiquant que le fichier n'est pas téléchargé. Quand j'ai ajouter le code javascript pour le progrès de téléchargement, mon php message que j'ai créer ne plus afficher.

C'est mon javascript
upload.js fichier code:

 var handleUpload = function(event) {
event.preventDefault();
event.stopPropagation();
var fileInput = document.getElementById('image_id');
var data = new FormData();
data.append('javascript', true);
if(fileInput.files[0].size > 1050000) {
document.getElementById("image_id").innerHTML = "Image too big (max 1Mb)";
alert('Fotografija koju želite dodati je veća od 1Mb!');
window.location="upload_images.php"
return false;
}
for (var i =0; i < fileInput.files.length; ++i) {
data.append('image', fileInput.files[i]);
}
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percent = event.loaded / event.total;
var progress = document.getElementById('upload_progress');
while (progress.hasChildNodes()) {
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %'));
}
});
request.upload.addEventListener('load', function(event) {
document.getElementById('upload_progress').style.display = 'none';
});
request.upload.addEventListener('error', function(event) {
alert('Dodavanje slika nije bilo uspješno! Pokušajte ponovo.');
});
request.addEventListener('readystatechange', function(event) {
if (this.readyState == 4) {
if(this.status == 200) {
var links = document.getElementById('uploaded');
window.location="upload_images.php?success"
console.log(this.response); 
} else {
console.log('Server replied with HTTP status ' + this.status);
}
}
});
request.open('POST', 'upload_images.php');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
}
window.addEventListener('load', function(event) {
var submit = document.getElementById('submit');
submit.addEventListener('click', handleUpload);
});

Et c'est mon formulaire pour uploader des fichier de:

<div id="uploaded">
</div>
<div>
<form action="" method="post" enctype="multipart/form-data">
<input name="image" id="image_id" type="file" size="25" value="Odaberi sliku" />
<input type="submit" id="submit" value="Dodaj Foto"/>
</form>
</div>
<div class="upload_progress" id="upload_progress"></div>

J'ai besoin de ce code javascript également à vérifier est que le fichier est une image. Pour permettre jpg, jpeg, png et gif extensions et d'en bloquer d'autres. Pour alerter l'utilisateur si il en train de télécharger d'autres type de fichier.

source d'informationauteur Mirsad Batilovic