Jump to content

Upload Multiple Images and Captions

ainoy31

By ainoy31
in Applications

 Share

Recommended Posts

ainoy31 Advanced Member

ainoy31

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/146589-upload-multiple-images-and-captions/
Share on other sites
ainoy31 Advanced Member

ainoy31

Posted
  • Author
Posted

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.