multiple picture upload script

[dschuett]

I have created a script that lets you upload multiple pictures, but the down side is that I have to browse to each and every picture to select it. - Which is very inefficient, especially because I am putting this all together for a photographer to allow her to upload photos for her clients to view (which cab be up to 100 pictures per client). Is there a way to upload multiple pictures at one time without having to browse to each and everyone to select it? The thing is, my script also inserts the path of the picture into a database in order to link it to a specific client.... so I am actually very lost on how to do this.

any help is much appreciated!

[hielo]

...the down side is that I have to browse to each and every picture to select it.

if you rephrase that sentence to "the down side is that I have to manually select each and every picture..."

then clearly you are looking for a way to select the pictures programatically. For security reasons, the browser does NOT allow you to "select" files programatically. Otherwise, there would be tons of sites out there that upon page load would automatically upload your files programatically to a remote server (auto-steal your files)!

So, your option would be to have the individual create a zip file of the photos and that way he/she would only upload one file. You can then unzip the file on your server once it is uploaded and then process all the pictures at once.

[dschuett]

Ok, I'm a little confused here. There are plenty of sites that allow you to select multiple pictures at once without having to use a separate browse button every time. Facebook for example (I know it is java) let's you put a check box my each picture you want to upload. - There are also many other sites that allow you to click a browse button ONE TIME and hold down the Ctrl button and select as many files as you want. So I don't think I made myself clear the first time....

[hielo]

OK. I thought you were referring to multiple files but using only html. Try:
http://www.uploadify.com/

[dschuett]

hielo,

Thanks you so much for your help! Uploadify is exactly what I'm looking for, however...me being fairly new to php I am unsure on how to implement my own upload.php which is a MUST for this to work with my project. My upload script adds each image(its path) into a picture table in a database as it is uploaded. Here is uploadify's upload.php:

if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
	$targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
	
	// $fileTypes  = str_replace('*.','',$_REQUEST['fileext']);
	// $fileTypes  = str_replace(';','|',$fileTypes);
	// $typesArray = split('\|',$fileTypes);
	// $fileParts  = pathinfo($_FILES['Filedata']['name']);
	
	// if (in_array($fileParts['extension'],$typesArray)) {
		// Uncomment the following line if you want to make the directory if it doesn't exist
		// mkdir(str_replace('//','/',$targetPath), 0755, true);
		
		move_uploaded_file($tempFile,$targetFile);
		echo "1";
	// } else {
	// 	echo 'Invalid file type.';
	// }
}
?>

And here is my script which i need to implement:

<?php
  if (isset($_POST['upload'])) {
  $con = mysql_connect("localhost", "xxx", "xxx") or die("cannot connect");
  mysql_select_db("xxx", $con) or die("cannot select DB");
      $img = $_FILES["image"]["name"];
      foreach ($img as $key => $value) {
          $name = $_FILES["image"]["name"][$key];
          $tname = $_FILES["image"]["tmp_name"][$key];
          $size = $_FILES["image"]["size"][$key];
          $oext = getExtention($name);
          $ext = strtolower($oext);
          $base_name = "uploads/".getBaseName($name).".$ext";
	   $whois = $_SERVER['REMOTE_ADDR'];
          if ($ext == "jpg" || $ext == "jpeg" || $ext == "bmp" || $ext == "gif") {
              if ($size < 1024 * 1024) {
                  if (file_exists("uploads/" . $name)) {
                      move_uploaded_file($tname, "uploads/" . $name);
                      $result = 1;
                      //list($width, $height) = getimagesize("uploads/" . $name);
                      $qry = "select id from img where img_base_name='$base_name' and img_ext='$ext'";
                      $res = mysql_fetch_array(mysql_query($qry));
                      $id = $res['id'];
                      $qry = "UPDATE pictures SET path='$base_name', type='$ext', size='$size', date=NOW() where id=$id";
                      mysql_query($qry);
                      ?><div style="float:right; text-align:left; width:400px;"><?php echo "Image '$name' <font color='blue'>updated</font><br />";
                  } else {
                      move_uploaded_file($tname, "uploads/" . $name);
                      $result = 1;
                      //list($width, $height) = getimagesize("uploads/" . $name);
                      $qry = "INSERT INTO pictures(id, path, type, size, email, whois, date) VALUES ('', '$base_name', '$ext', '$size', '[e-mail]', '$whois', NOW())";
                      mysql_query($qry, $con);
                      //Error Checking off by default. Uncomment if you run into problems.
                      //mysql_error();
                      //print_r($qry);
                      ?><div style="float:right; text-align:left; width:400px;"><?php echo "Image '$name' <font color='green'>uploaded</font><br />";
                  }
              } else { 
                  ?><div style="float:right; text-align:left width:400px;"><?php echo "<font color='red'><B>Image size excedded.<br />File size should be less than 1Mb</B></font><br />";
              }
          } else {
              ?><div style="float:right; text-align:left; width:400px;"><?php  echo "<font color='red'><B>Invalid file extention '.$oext'</B></font><br />";
          }
      }
  }
  function getExtention($image_name)
  {
      return substr($image_name, strrpos($image_name, '.') + 1);
  }
  function getBaseName($image_name)
  {
      return substr($image_name, 0, strrpos($image_name, '.'));
  }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     	<title>Shots by Shell Image Uploader</title>
        <link rel='stylesheet' type='text/css' href='/scripts/upload_style.css' />
  <script type="text/javascript">
 	function addItems()
  	{
  	var table1 = document.getElementById('tab1');
  	var newrow = document.createElement("tr");
  	var newcol = document.createElement("td");
  	var input = document.createElement("input");
  	input.type="file";
  	input.name="image[]";
  	newcol.appendChild(input);
  	newrow.appendChild(newcol);
  	table1.appendChild(newrow);
  	}
  	function remItems()
  	{
  	var table1 = document.getElementById('tab1');
  	var lastRow = table1.rows.length;
  	if(lastRow>=2)
  	table1.deleteRow(lastRow-1);
  	}
 </script>
	<style type="text/css">
		<a class="tooltip" and them url href="/http.www.anyurl.com" </a>
		a.tooltip:hover span{display:inline; position:absolute; border:2px solid #cccccc; background:#efefef; color:#333399;}
		a.tooltip span
		{display:none; padding:2px 3px; margin-left:8px; width:150px;}
        </style>
</head>
<body>
<center>
<div id="box">
  <form method="post" action="" enctype="multipart/form-data">
<table align="center" width="450px"><tr><td>
	<table style="float:left;" id="tab1">
	     <tr>
		<td width="218" align="center"><input type="file" name="image[]" /></td>
		<td width="54" align="center"><img src="Add-icon.png" alt="Add" style="cursor:pointer" onclick="addItems()" /></td>
		<td><img src="Delete-icon.png" alt="Remove" style="cursor:pointer" onclick="remItems()" /></td>
	    </tr>
	</table>
        <table  id="tab2">
	   <tr>
		<td style="padding-left:10px;"><input type="image" name="upload" src="Upload-icon.png" value="Upload" /></td></tr>
	</table>
</td></tr></table>
  </form>
</div>
</center>
<h3 style="text-align:right; margin-right: 400px; margin-bottom:-5px; color:#0066CC;">Upload Results:</h3>
<hr width="100%"></hr>
 </body>
</html>

Is this possible?