Jquery Mysql PHP

Multiple image upload using ajax and php

Very few days back I had posted an article about Multiple ajax image upload without refreshing the page using jquery and PHP. In this post I have updated few lines of code that allows to user can select and upload multiple images in single shot.  Just take a quick look this live demo.

Sample database design for Users.

Users
Contains user details username, password, email, profile_image and profile_image_small etc.

User Uploads

Contains user upload details upload_id, image_name, user_id_fk(foreign key) and timestamp etc.

 

Javascript Code
$(“#photoimg”).live(‘change’,function(){})photoimg is the ID name of INPUT FILE tag and$(‘#imageform’).ajaxForm()imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method. Uploaded images willprepend inside #preview tag.

Here hiding and showing #imageloadstatus and #imageloadbutton based on form upload submit status.



index.php
Contains simple PHP and HTML code. Here $session_id=1 means user id session value.

ajaxImageUpload.php
Contains PHP code. This script helps you to upload images into uploads folder and it will  rename image file into timestamp+session_id.extention format to avoid duplicates. This system will store image files into user_uploads with user session id tables

db.php
Database configuration file, just modify database credentials.

CSS
Style for image blocks.