Upload Multiple Images and Captions

ainoy31 · February 23, 2009

I have a form where my client can upload images and the captions for the images. The form is dynamic where they click on the Add button, another upload and caption field is appears.

Here is my code

<script type="text/javascript">
$(document).ready(function() 
{
var added_units = [];
    var pnum = 1;

$('#addUnit').click(function()
{
	if(typeof(itemnum) != 'undefined' && itemnum > 12)
	{
		alert("Sorry. To add more, click on the Add button");
		return false;
	}

	blank = $('tr.hiddenunit');
       	newitem = blank.clone().insertBefore(blank).removeClass('hiddenunit');
     	newitem.addClass("unit");
        itemnum = newitem.siblings().length;  

	//newitem.find('td.unitnum').text(itemnum + '.', true);
	newitem.find('input.imgName').attr("id", 'imageName' + itemnum);
	newitem.find('input.imgName').addClass("imageName");
	newitem.find('input.imgName').attr({name: 'imageName[]' + itemnum});

	newitem.find('input.imgFile').attr("id", 'imageFile' + itemnum);
	newitem.find('input.imgFile').addClass("imageFile");
	newitem.find('input.imgFile').attr({name: 'imageFile[]' + itemnum});

	added_units.push(newitem);
});

$('#removeUnit').click(function()
{
	if(pnum == 2)
	{
		$('removeUnit').toggleClass("removeUnit");
	}

	pnum = pnum - 1;
        var runit = added_units.pop();
        runit.remove();
});

});
</script>
</head>
<body>
<fieldset>
	<legend>Add Photo</legend>
	<form name="addPhoto" method="post" action="upload_photo.php" enctype="multipart/form-data">
	<table class="loginpage" align="center">
		<tr>
			<td align="right" class="loginpage">Select Gallery Type: </td>
			<td align="left" class="loginpage">
				<select name="galleryType">
					<option value="">-- Options --</option>
					<option value="Portrait">Portrait</option>
					<option value="Landscape">Landscape</option>
				</select>
		</tr>
		<tr>
			<td align="right" class="loginpage">Select Category Type: </td>
			<td align="left" class="loginpage">
				<select name="categoryType">
					<option value="">-- Options --</option>
					<option value="Action">Action</option>
					<option value="Kids">Kids</option>
					<option value="Pets">Pets</option>
					<option value="Portraits">Portraits</option>
				</select>
		</tr>
	</table>
	<hr>
	<center><table>
		<tr class="unit">
			<td align="right" class="loginpage">Image Name or Caption: </td>
			<td align="left" class="loginpage"><input name="imageName[]" id="imageName" class="imageName" type="text" size="20">
			<td align="right" class="loginpage">Upload Image: </td>
			<td align="left" class="loginpage"><input name="imageFile[]" id="imageFile" class="imageFile" type="file" size="20"></td>
		</tr>
		<tr class="hiddenunit">
			<td align="right" class="loginpage">Image Name or Caption: </td>
			<td align="left" class="loginpage"><input type="text" name="imgName[]" id="r1imgName" class="imgName" size="20" /></td>
			<td align="right" class="loginpage">Upload Image: </td>
			<td align="left" class="loginpage"><input type="file" name="imgFile[]" id="r1imgFile" class="imgFile" size="20" /></td>
		</tr>
		<tr>
		</tr>
		<tr>
			<td align="right" class="loginpage">
			<td align="left" class="loginpage"><a href="#" id="addUnit"><img src="images/add.png" class="button" alt="Add Another Image" title="Add Another Image" />Add Another Image</a></td>
		</tr>
		<tr>
			<td align="right" class="loginpage">
			<td align="left" class="loginpage"><a href="#" id="removeUnit"><img src="images/delete.png" class="button" alt="Remove Image" title="Remove Image" /> Remove Previous Image</a></td>
		</tr>
		<tr></tr><tr></tr><tr></tr><tr></tr>
		<tr>
			<td align="right" class="loginpage">
			<td align="left" class="loginpage">
				<input type="submit" name="submit1" value="Upload">  <input type="reset" name="submit2" value="Reset">
			</td>
		</tr>
	</table></center>
	</form>
</fieldset>

On the upload.php I am doing the following and it does not work.

$x = 0;

//list of known photo types
$photo_types = array(
	'image/pjpeg' => 'jpg',
	'image/jpeg' => 'jpg',
	'image/gif' => 'gif',
	'image/bmp' => 'bmp',
	'image/x-png' => 'png'
	);
$photos_captions = $_POST['imageName']; //the image caption array
$photos_uploaded = $_POST['imageFile']; //the image array

$galleryType = $_POST['galleryType'];
$categoryType = $_POST['categoryType'];

$imageDirectory = $galleryType . "/" . $categoryType . "/";

//$insertImage = $imageDirectory . $image_tempName;
while($x <= count($photos_uploaded))
{
if($photos_uploaded['size'][$x] > 0)
{
	if(!array_key_exists($photos_uploaded['type'][$x], $photo_types))
	{
		$message .= "File " . ($counter + 1) . " is not a valid photo<br>";
	}
	else
	{
		if($galleryType == 'Landscape')
		{
			$categoryID = 1;
		}
		if($galleryType == 'Portrait')
		{
			$categoryID = 2;
		}
		$image_tempName = $_FILES['imageFile']['name'][$x];
		$insertImage = $imageDirectory . $image_tempName;
		//insert data into the picture table
		$sql = "INSERT INTO table_name (subcategory, caption, location, category_id, active)
				VALUES ('$categoryType', '$imageName', '$insertImage', '$categoryID', '1')";
		$result = mysql_query($sql) or die('Error for insert picture: ' . mysql_error());

		//store the original image file 
		copy($photos_uploaded['tmp_name'][$counter], $insertImage);
	}
}//end of if($photos_uploaded['size'][$counter] > 0)
else
{
	echo "Images uploading failed....";
}
$x++;
}//end of while() loop

Much appreciation for a second eye. Thanks. AM

trq · February 23, 2009

I am doing the following and it does not work.

Meaning what exactly?

ainoy31 · February 23, 2009

Sorry. If I have more than one images to upload, it will only insert and upload one image. There is a correction I thought would have fixed it but it did not. Instead of this code - $photos_uploaded = $_POST['imageFile']; I changed it to $photos_uploaded = $_FILES['imageFile']; Much appreication.

Sign In

Upload Multiple Images and Captions

Recommended Posts

ainoy31

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

ainoy31

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information