smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

Friends, Today I am posting multiple image upload using jquery in a php form. It is a dynamic script that will upload image without refresh and stored temporarily in the database. It will finally set in database when we will submit our main form.

Here is the code for our form -

<table width="100%" align="center" border="0">
<form method="post" enctype="multipart/form-data">
<tr>
	<td width="25%">Title :</td>
	<td><input type="text" name="title" id="title" size="30" value=""/></td>
</tr>

<tr>
	<td valign="top">Item Avatar :</td><td valign="top">
	<div id="upload" ><span>Upload Image<span></div><span id="status"></span>
	<table><tr><td id="files"></td></tr></table>
	</td>
</tr>
<tr>
	<td colspan="2" align="center">
	<input type="submit" name="add_item" value="Submit" id="sub_button" />&nbsp;
       </td>
</tr>
</form>
</table>

We will use this simple jquery code for sending server side request to store our image as well as client side validation for valid image.

<script language="javascript" type="text/javascript">
$(function()
{
	var btnUpload=$('#upload');
	var status=$('#status');
	new AjaxUpload(btnUpload, {
	action: 'upload-file.php',
	name: 'uploadfile',
	onSubmit: function(file, ext)
	{
	 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
     // extension is not allowed
	status.text('Only JPG, PNG or GIF files are allowed');
	return false;
	}status.text('Uploading...');
	},

	onComplete: function(file, response)
	{
		//On completion clear the status
		status.text('');
		//Add uploaded file to list
		var bb=response.substr(0,7)
		var idd=response.replace('success',' ');
		var idb =idd.replace(/^\s*|\s*$/g,'');
		if(bb==="success")
		{
			$('<span></span>').appendTo('#files').html('<img src="images/'+file+'" alt="" width="120" height="120" style="margin:5px;" />').addClass('success');
		}
		else
		{
			$('<span></span>').appendTo('#files').text(file).addClass('error');
		}
	}});
});

</script>

In upload-file.php, we simply write code to upload file using php function move_uploaded_file() using temp session variable for first time. After uploading no. of files, when we finally submit form data then we replace temp session with the main table id in database at the time of insert data to table.

You can download complete source code from here.

Download