...

View Full Version : Multiple Image Uploads to Database



ccarrin2
02-22-2012, 01:33 AM
I'm working on a program to upload images to a database and I got it to work perfectly! My users are able to choose a file, upload an image and then view the image on their profile. After I finished I realized my only option of allowing one upload at a time was not exactly convenient so I decided the young program needed a remodel. I need to allow users to upload multiple images all at once.

So I figured out how to create a dynamic form that will allow users to continue to add fields until they are content, but now I have no idea how to create the loop I need to cypher through the files and put each one in it's own column in my database. For example, if I try to do multiple uploads now, lets say 3 images, my program will take the last image, upload it to the database, and ignore the first two.

I'm guessing I will need a for loop but I need a bit of help because this is a bit over my head. So again, form works great, all validation checking works great, and my connection to my database works great! I just need some help with what I'm guessing will be a for loop to grab those files individually and place them in my database! Thank you for reading code is below!

User Upload Form:


<script>
function addFile(addFileButton)
{
var form = document['uploadform'];

var f = document.createElement("input");
f.type="file";
f.name="picture";

var rb = document.createElement("input");
rb.type="button";
rb.value="Remove File";
rb.onclick = function ()
{
form.removeChild(this.previousSibling);
form.removeChild(this.nextSibling);
form.removeChild(this);
}
form.insertBefore(f, addFileButton);
form.insertBefore(rb, addFileButton);
form.insertBefore(document.createElement("br"), addFileButton);
}
</script>
<form action="upload.php" method="post" enctype="multipart/form-data" name="uploadform">
<div style="display:none;"><input name="user_id" value="<?php echo $mngl_user->id; ?>" type="text" id="user_id" size="25"></div>
<input name="picture" type="file" id="picture" size="20" /><br />
<input type="button" name="addFile" value="Add more files" onClick="window.addFile(this)" />
<input type="submit" value="Upload" name="upload" />
</form>


upload.php



<style>
A:visited { color: #3B5998; }
A:link { color: #3B5998; text-decoration: none}
A:visited {text-decoration: none}
A:hover {color:#000000;;}
</style>

<?php
// if something was posted, start the process...
if(isset($_POST['upload']))
{

// define the posted file into variables
$name = $_FILES['picture']['name'];
$tmp_name = $_FILES['picture']['tmp_name'];
$type = $_FILES['picture']['type'];
$size = $_FILES['picture']['size'];


// get the width & height of the file (we don't need the other stuff)
list($width, $height, $typeb, $attr) = getimagesize($tmp_name);

// if width is over 1000 px or height is over 1000 px, kill it
if($width>1000 || $height>1000)
{
echo $name . "'s dimensions exceed the 1000x1000 pixel limit.";
?> <a href="form.html">Click here</a> to try again. <?
die();
}

// if the mime type is anything other than what we specify below, kill it
if(!(
$type=='image/jpeg' ||
$type=='image/jpg' ||
$type=='image/bmp' ||
$type=='image/png'
)) {
echo $type . " is not an acceptable format.";
?> <a href="form.html">Click here</a> to try again. <?
die();
}

// if the file size is larger than 350 KB, kill it
if($size>'350000') {
echo $name . " is over 350KB. Please make it smaller.";
?> <a href="form.html">Click here</a> to try again. <?
die();
}

// if your server has magic quotes turned off, add slashes manually
if(!get_magic_quotes_gpc()){
$name = addslashes($name);
}

// open up the file and extract the data/content from it
$extract = fopen($tmp_name, 'r');
$content = fread($extract, $size);
$content = addslashes($content);
fclose($extract);

$user_id = $_POST['user_id'];
$image_title = $_POST['image_title'];

// connect to the database
include "connect.php";

// the query that will add this to the database
$addfile = "INSERT INTO files (name, size, type, content, mngl_id, width, image_title) ".
"VALUES ('$name', '$size', '$type', '$content' , '$user_id' , '$width', '$image_title')";

mysql_query($addfile) or die(mysql_error());

// get the last inserted ID if we're going to display this image next
$inserted_fid = mysql_insert_id();

mysql_close();

// display the image
?>
<div align="center">
<strong><? echo $name; ?><br>
</strong><img name="<? echo $name; ?>" src="getpicture.php?fid=<? echo $inserted_fid; ?>" alt="Unable to view image #<? echo $inserted_fid; ?>">
<br>
<a href="http://www.instride.info/profile">Back to profile!</a>
</div>
<?
// we still have to close the original IF statement. If there was nothing posted, kill the page.
}else{die("No uploaded file present");
}
?>

cercos
02-22-2012, 02:16 AM
Not sure if the increment is correct for the javascript,any how try this out:

Change your javascript and html to:


<script>
function addFile(addFileButton)
{
var form = document['uploadform'];
var i = 1;
var f = document.createElement("input");
f.type="file";
f.name="picture" + i++;

var rb = document.createElement("input");
rb.type="button";
rb.value="Remove File";
rb.onclick = function ()
{
form.removeChild(this.previousSibling);
form.removeChild(this.nextSibling);
form.removeChild(this);
}
form.insertBefore(f, addFileButton);
form.insertBefore(rb, addFileButton);
form.insertBefore(document.createElement("br"), addFileButton);
}
</script>


<form action="upload.php" method="post" enctype="multipart/form-data" name="uploadform">
<div style="display:none;"><input name="user_id" value="<?php echo $mngl_user->id; ?>" type="text" id="user_id" size="25"></div>
<input name="picture" type="file" id="picture1" size="20" /><br />
<input type="button" name="addFile" value="Add more files" onClick="window.addFile(this)" />
<input type="submit" value="Upload" name="upload" />
</form>


then your php to something like this (basically with incremnting the file field name in the form you can access each file by it's on incrmenter:

<?php
for ($i = 1; $i <= 5; $i++) {
echo "Name of file is ", $_FILES["picture$i"]['name'];
//do a whole bunch cool sh!t here
}
?>

ccarrin2
02-22-2012, 02:46 AM
so in relation to my php code where would your for loop go exactly? I tried placing it here



if(isset($_POST['upload']))
{

for ($i = 1; $i <= 5; $i++) {
echo "Name of file is ", $_FILES["picture$i"]['name'];


// define the posted file into variables
$name = $_FILES['picture']['name'];
$tmp_name = $_FILES['picture']['tmp_name'];
$type = $_FILES['picture']['type'];
$size = $_FILES['picture']['size'];


and that resulted in the first image getting uploaded 5 times but no 2nd image. Where should my for loop be placed and closing brace? thank you for helping me.

litebearer
02-22-2012, 03:44 AM
http://www.plus2net.com/php_tutorial/php_multi_file_upload.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum