upload image and edit online

[anf.etienne]

Hi,

 

I have asked before but never got an answer from anyone...so im trying again as i am a newbie and really could do with some help...

 

I have made a upload form to upload images and then edit it, i have add the codes below in order that it operates and ill add titles to it so you know what you are looking at. I'd just like to know where i was made a mistake. Thank you in advance

 

UPLOAD FORM- this is what i use to upload the images and also once they are uploaded to produce a link for each image to edit them using webresizer.

 

      <tr>
        <td colspan="2"><div align="center"><strong>NOTE:</strong> Please save your listing NOW before you upload your pictures</div>
          <!--mult.pictures-->
          <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
          <script>
    <!--

$(document).ready(function(){
	$("#generate").click(function(){
		//xxxxxxxxx
		//$("#quote").show("slow");
		//$("#quote p").load("demo2_edit.php");
		//grayOut(true, {'zindex':'0', 'bgcolor':'#000000', 'opacity':'90'});
	});
}); 

function editImage(id) {
	//window.open('demo2_edit.php?img='+$imageL,'res','width=800, height=700, scrollbars=1');
	$("#quote").show("slow");
	document.getElementById("iframeresize").src='demo2_edit.php?img='+$imageL;

	//$("#quote").load("demo2_edit.php?img="+$imageL);
	//grayOut(true, {'zindex':'50', 'bgcolor':'#000000', 'opacity':'90'});
}
function cancelEdit() {
	document.getElementById("iframeresize").src='';
	$("#quote").hide("slow");
}
-->
          </script>
          <style>
#quote {
display:none;
width:650px;
height:1100px;
border:2px solid #000000;
background-color:#ebebeb;
z-index:1000;
}
#quotewrapper {
}
          </style>
          <div id="quotewrapper">
            <div id="quote">
              <div>
                <iframe src="" frameborder="0" width="100%" height="100%" id="iframeresize"></iframe>
              </div>
              <div style="margin:10px; text-align:center;"><a href="javascript:cancelEdit();">[Cancel Image editing]</a></div>
            </div>
          </div>
          
<p>
            <a href="javascript:showhide('div_viewimages');">[View Images]</a></p>
              <div id="div_viewimages" style="border:1px solid #999999; margin-bottom:10px; padding:5px;">       
<?php

$folderPath= $id;

$path = "$folderPath"; // path to the directory to read ( ./ reads the dir this file is in)
if ($handle = opendir($path)) {
   while (false !== ($file = readdir($handle))) {
    if ($file != "." && $file != "..") {
        if(!is_dir($file)){
            $item[] = $file;
            }
       }
   }
   closedir($handle);
}

$total_items = count($item);
$max_items = ceil($total_items / 5); // items per <td>
$start = 0;
$end = $max_items

//generate the table
?>
<center>
<table width="500px" border="0" cellspacing="0" cellpadding="2" align="center">
  <tr>
    <?php
    for($i=0; $i<5; $i++){
        if($i != 0){
            $start = $start + $max_items;
            $end   = $end + $max_items;
        }
        echo "<td>";
        for($x = $start; $x < $end; $x++){
	$imageL= $path.$item[$x];
            // display the item
            echo '<center><p><img src= "'.$path.$item[$x] .'" height="100" width="100"></p></center>';
            echo "<a href=javascript:editImage('$imageL')>[Edit / resize]</a><br>";
        }
    echo "</td>";
    }
    ?>
  </tr>
</table>
        
              
        </div>          <!--end:mult.pictures-->
      
          
          <table width="100%" border="0" cellpadding="5">
              </table><p>
            <a href="javascript:showhide('div_uploadnewimages');">[upload New Images]</a></p>
              <div id="div_uploadnewimages" style="border:1px solid #999999; margin-bottom:10px; padding:5px;"> 
                <p><strong>Upload new images</strong></p>
                <p>
                  <label>
</form>
                  </label>
                  <br />
<script language="javascript" type="text/javascript">

    function addField() {
    var tbody = document.getElementById("tblBody");
    var ctr = tbody.getElementsByTagName("input").length + 1;
    var input;
  
    if ( ctr > 75 ) {
          alert ("The maximum number of images has been reached.");
    }else{
  
        if (document.all){ //input.name doesn't work in IE
            input = document.createElement('<input name="images[]">');
        }else{
            input = document.createElement('input');
            input.name = "images[]";
        }

        input.id = input.name;
        input.type = "file";
        input.value = "";
        input.className = "images[]";
        var cell = document.createElement('td');
        cell.style.height = '30px';
        cell.appendChild(document.createTextNode(ctr+". "));
        cell.appendChild(input);
        var row = document.createElement('tr');
        row.appendChild(cell);
        tbody.appendChild(row);
  
        window.document.the_form.count.value = ctr;
  
    }
} 
</script>



<body>




    <form name="the_form" id="the_form" method="POST" action="addimgck.php" enctype="multipart/form-data">
    
          <table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tbody id="tblBody">
            <tr>
              <td height="30">
                1. <input name="images[]" type="file" class="imgfield" id="field_1" />
              </td>
            </tr>
            <tr>
              <td height="30">
                2. <input name="images[]" type="file" class="imgfield" id="field_2" />
              </td>
            </tr>
            <tr>
              <td height="30">
                3. <input name="images[]" type="file" class="imgfield" id="field_3" />
              </td>
            </tr>
            <tr>
              <td height="30">
                4. <input name="images[]" type="file" class="imgfield" id="field_4" />
              </td>
            </tr>
            <tr>
              <td height="30">
                5. <input name="images[]" type="file" class="imgfield" id="field_5" />
              </td>
            </tr>
            
        <tbody
        </table>
          <input name="count" type="hidden" id="count" value="4"/>        
          <input name="add" type="button" class="button" id="add" value="Add Image(s)" onClick="addField();"/>          
	  <input name="Upload Image(s)" type="submit" value="Upload Image" />
    </form>
                  </p>
              </div>

 

PROCESSING- once the images have been selected and they hit upload image this code processes the images

 

<?php
session_start();
$imageL = $_GET['img'];
$_SESSION['FILEPATH'] = $imageL;
?>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Multiple image upload script from plus2net.com</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">




<?
$random_digit=rand(0000000000,9999999999);

$folderIn=mkdir("upload/$random_digit", 0777); 
?>
<?
while(list($key,$value) = each($_FILES['images']['name']))
	{
		if(!empty($value))
		{
			$filename = $value;
				$filename=str_replace(" ","_",$filename);// Add _ inplace of blank space in file name, you can remove this line

				$add = "upload/$random_digit/$filename";
                       //echo $_FILES['images']['type'][$key];
		     // echo "<br>";
				copy($_FILES['images']['tmp_name'][$key], $add);
				chmod("$add",0777);

$full_path="http://ve-creative.com/test/8/";

$folderPath="upload/$random_digit/";
		}
	}

?>

<?php
$id="$folderPath";
include "templateEdit.php"; ?>

<?
$username="vecre0_tempU";
$password="auction";
$database="vecre0_templates";


// OPEN CONNECTION ---> 
$connection=mysql_connect("localhost","$username", "$password") or die("Unable to connect!");

mysql_select_db("$database") or die("Unable to select database!");


//  EXECUTE QUERY ---> 
$query="INSERT INTO paths (

		folderPath)

        VALUES(		
            '".$folderPath."')";
//////-----> 
$result=mysql_query($query) or die("Error in query:".mysql_error()); 
//if ($result) 
    //echo mysql_affected_rows()." row inserted into the database effectively."; 

//  CLOSE CONNECTION ---> 
mysql_close($connection); 
?>

</body>

</html>

 

once it has been processed it returns to the original coding to this below

 

<table width="500px" border="0" cellspacing="0" cellpadding="2" align="center">
  <tr>
    <?php
    for($i=0; $i<5; $i++){
        if($i != 0){
            $start = $start + $max_items;
            $end   = $end + $max_items;
        }
        echo "<td>";
        for($x = $start; $x < $end; $x++){
	$imageL= $path.$item[$x];
            // display the item
            echo '<center><p><img src= "'.$path.$item[$x] .'" height="100" width="100"></p></center>';
            echo "<a href=javascript:editImage('$imageL')>[Edit / resize]</a><br>";
        }
    echo "</td>";
    }
    ?>
  </tr>
</table>

 

it generates links to edit and resize the image for the javascript. I personally think that i have edited the javascript to load a iframe with the webresizer. That is this code

 

          <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
          <script>
    <!--

$(document).ready(function(){
	$("#generate").click(function(){
		//xxxxxxxxx
		//$("#quote").show("slow");
		//$("#quote p").load("demo2_edit.php");
		//grayOut(true, {'zindex':'0', 'bgcolor':'#000000', 'opacity':'90'});
	});
}); 

function editImage(id) {
	//window.open('demo2_edit.php?img='+$imageL,'res','width=800, height=700, scrollbars=1');
	$("#quote").show("slow");
	document.getElementById("iframeresize").src='demo2_edit.php?img='+$imageL;

	//$("#quote").load("demo2_edit.php?img="+$imageL);
	//grayOut(true, {'zindex':'50', 'bgcolor':'#000000', 'opacity':'90'});
}
function cancelEdit() {
	document.getElementById("iframeresize").src='';
	$("#quote").hide("slow");
}
-->
          </script>
          <style>
#quote {
display:none;
width:650px;
height:1100px;
border:2px solid #000000;
background-color:#ebebeb;
z-index:1000;
}
#quotewrapper {
}
          </style>

[anf.etienne]

can anyone help at all or is this just going to be another waste of time???