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" />
</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
August 29th, 2010 at 10:56 am
Hi,
very nice And 100% Work. But i have 2 problem .
1- How To add limit for upload images .
2- How To add remove link for each image.
Thanks
September 5th, 2010 at 1:59 pm
Thanks Persa,
I will upload post again with requested features so that all users can also get updates.
September 26th, 2010 at 1:57 pm
Your code is very important. I need to upload more files with two input fields it mean when form load I need to make 5 upload fields. I try to improve your code but am unable to develop to upload more than one file buttons. Please help me?
December 24th, 2010 at 4:43 am
It’s Ok , Better create the image upload…
Thanks,
January 9th, 2011 at 11:40 pm
I am trying to save image links to a mysql database from upload-file.php, however no cookies or sessions will carry across to this page, any ideas? Basically i need to have a user_id parse accross
January 10th, 2011 at 5:58 am
@Dave While receiving response on index page, you can append one text field for image link. You can retrieve and insert this link into db after posting.
February 1st, 2011 at 4:44 am
i have d/w the plugin n integrated it …but the image file is not getting saved…it is going in the error condition ..please help
February 22nd, 2011 at 5:58 pm
@kiran Make sure you have given proper permission to image folder.
February 26th, 2011 at 4:46 pm
Thanks, this looks good.
Now if only I can position it the right way, in my DIV’s.
June 5th, 2011 at 8:51 am
This script looks great and I have already started testing it for a future site.
One important thing missing is file size, you should be able to set a max file size option that will stop the code if that size is exceeded or perhaps a way of reducing the file size of a larger file.
June 5th, 2011 at 10:43 am
@Simon, thanks.. file size validation can be integrate. I will soon publish its third updated version with more features.
you can try image resize into it.. just read below post..
http://smartcoderszone.com/2010/05/simple-image-resize-script-in-php/