How to alter jQuery code to only allow jpg files

[sammon]

I have a jQuery function that allows the user to upload images. Admittedly I know very little about jQuery but I need to be able to change this code slightly. At the moment it will throw an error if a file that isn't an image is used but I would like it to throw an error is a that file isn't a jpg, JPG, jpeg or JPEG.I'm not sure how much of the original code is needed but this is the section that does the filtering.\[code\] $(document).ready(function() { // Makes sure the dataTransfer information is sent when we // Drop the item in the drop box. jQuery.event.props.push('dataTransfer'); var z = -40; // The number of images to display var maxFiles = 5; var errMessage = 0; // Get all of the data URIs and put them in an array var dataArray = []; // Bind the drop event to the dropzone. $('#drop-files').bind('drop', function(e) { // Stop the default action, which is to redirect the page // To the dropped file var files = e.dataTransfer.files; var ext = $('#drop-files').val().split('.').pop().toLowerCase(); // Show the upload holder $('#uploaded-holder').show(); // For each file $.each(files, function(index, file) { // Some error messaging if (!files[index].type.match('image.*')) { if(errMessage == 0) { $('#drop-files').html('Only jpg files are allowed'); } return false; } // Check length of the total image elements if($('#dropped-files > .image').length < maxFiles) { // Change position of the upload button so it is centered var imageWidths = ((220 + (40 * $('#dropped-files > .image').length)) / 2) - 20; $('#upload-button').css({'left' : imageWidths+'px', 'display' : 'block'}); } // Start a new instance of FileReader var fileReader = new FileReader(); // When the filereader loads initiate a function fileReader.onload = (function(file) { return function(e) { // Push the data URI into an array dataArray.push({name : file.name, value : this.result}); // Move each image 40 more pixels across z = z+40; var image = this.result; // Just some grammatical adjustments if(dataArray.length == 1) { $('#upload-button span').html("1 file to be uploaded"); } else { $('#upload-button span').html(dataArray.length+" files to be uploaded"); } // Place extra files in a list if($('#dropped-files > .image').length < maxFiles) { // Place the image inside the dropzone $('#dropped-files').append('<div class="image" style="left: '+z+'px; background: url('+image+'); background-size: cover;"> </div>'); } else { $('#extra-files .number').html('+'+($('#file-list li').length + 1)); // Show the extra files dialogue $('#extra-files').show(); // Start adding the file name to the file list $('#extra-files #file-list ul').append('<li>'+file.name+'</li>'); } }; })(files[index]); // For data URI purposes fileReader.readAsDataURL(file); }); }); function restartFiles() { // This is to set the loading bar back to its default state $('#loading-bar .loading-color').css({'width' : '0%'}); $('#loading').css({'display' : 'none'}); $('#loading-content').html(' '); // -------------------------------------------------------- // We need to remove all the images and li elements as // appropriate. We'll also make the upload button disappear $('#upload-button').hide(); $('#dropped-files > .image').remove(); $('#extra-files #file-list li').remove(); $('#extra-files').hide(); $('#uploaded-holder').hide(); // And finally, empty the array/set z to -40 dataArray.length = 0; z = -40; return false; } $('#upload-button .upload').click(function() { $("#loading").show(); var totalPercent = 100 / dataArray.length; var x = 0; var y = 0; $('#loading-content').html('Uploading '+dataArray[0].name); $.each(dataArray, function(index, file) { $.post('upload.php', dataArray[index], function(data) { var fileName = dataArray[index].name; ++x; // Change the bar to represent how much has loaded $('#loading-bar .loading-color').css({'width' : totalPercent*(x)+'%'}); if(totalPercent*(x) == 100) { // Show the upload is complete $('#loading-content').html('Uploading Complete!'); window.location = "http://www.dentaldigs.co.uk/upload_success.php"; // Reset everything when the loading is completed setTimeout(restartFiles, 500); } else if(totalPercent*(x) < 100) { // Show that the files are uploading $('#loading-content').html('Uploading '+fileName); } // Show a message showing the file URL. var dataSplit = data.split(':'); if(dataSplit[1] == 'upload successful') { var realData = 'http://stackoverflow.com/questions/15853905/<li><a href="http://stackoverflow.com/questions/15853905/images/'+dataSplit[0]+'">'+fileName+'</a> '+dataSplit[1]+'</li>'; $('#uploaded-files').append('<li><a href="http://stackoverflow.com/questions/15853905/images/'+dataSplit[0]+'">'+fileName+'</a> '+dataSplit[1]+'</li>'); // Add things to local storage if(window.localStorage.length == 0) { y = 0; } else { y = window.localStorage.length; } window.localStorage.setItem(y, realData); } else { $('#uploaded-files').append('<li><a href="http://stackoverflow.com/questions/15853905/images/'+data+'. File Name: '+dataArray[index].name+'</li>'); } }); }); return false; }); // Just some styling for the drop file container. $('#drop-files').bind('dragenter', function() { $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #B3C234'}); return false; }); $('#drop-files').bind('drop', function() { $(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0, 0, 0, 0.1)'}); return false; }); // Let them know that they aren