upload image and edit online

anf.etienne · February 20, 2009

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 · February 20, 2009

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

Sign In

upload image and edit online

Recommended Posts

anf.etienne

Link to comment

Share on other sites

anf.etienne

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information