PHP & jQuery - File/image uploader

For this example I created a page where a user can upload files & images to a web server. The items are stored and reflected so the user can see their multiple uploads. With PHP below I am handling the uploads and if the file already exists the user is notified that they are trying to do a duplicate upload.

And here this is defining the main work being done by this page. This is handling the file type to only allow images with extensions of: .gif, .jpg, .png, .jpeg. The size is also restricted to 500KB.

This is what the page looks like below with a little formatting. The alert below was triggered by trying to upload a file without one of the allowed extensions.

This is now echoing back to the screen the file size restrictions because an excessively large file was being uploaded.

In this block I create the div tags for the "dropZone" above and set the input type to handle the multiple attachments as an array.

And now below you can see what the page looks like after multiple successful image file uploads. The completion stage of the file uploads are shown during the upload. With this a user can upload images to a CRM system for sales, a profile picture for social media or a variety of other systems. The file types and sizes here were customized so this same format can be used to upload any file type of any size.