Twitter Like Profile Image Upload using jQuery AJAX

Twitter-like social media websites provide the photo upload feature with a list of action bar items, related to the upload process. These actions may be Insert New Photo, Update Photo, Cancel Upload or Remove Photo. On clicking the upload photo link, these options are shown to the user in a floating HTML element by using AJAX server-side functionality is added to them.

In this tutorial, we are going to see an example for uploading user’s profile photo with the upload menu options. These options are shown in the split buttons that are used to handle the actions related to the upload process. These are, Upload, Remove and Cancel. I use jQuery to show the floating action bars to the user. In a previous tutorial, we have seen an example for uploading images using jQuery AJAX without upload option menu.

HTML Code for Profile Image Upload with Floating Menu

The following HTML code shows the image upload form and the floating menu options related to the user’s profile image upload. On clicking the photo icon in the middle of the image preview, the floating upload action menu is displayed to the user by using jQuery. It shows the Upload, Remove and Cancel options. After selecting the image to be uploaded, the submit button is used to call the jQuery AJAX to execute image upload script.

jQuery and AJAX Code to Display Action Menu and Process Upload

The following jQuery script is used to show the floating action menu on clicking the photo icon. The Upload action menu bar in the menu is used to select the profile image and see the preview before upload. The Remove action deletes the existing image and the Cancel option cancels the upload attempt and hides the floating action menu.