PHP - Make Multiple Image Draggable

Hi!

I using PHP - GD to rotate an image and put a watermark to it, that works great!

But I want to make the image smaller because the image the user uploads is big.
I can make the image smaller by: style="width: 300px; height:300px;" but the quality is not good then.
My question is how I can make the image smaller, with GD if that's necessary.
I guess I want to keep the proportion so I got a normal picture and not to width or to height or something.

I want the picture width a width like 300-320 px how do i know how much the height will be?
And do i need to crop the image? And how do I crop the image and still beeing sure to keep the face of the person on the picture?

The width and height need to be same at all images!

Thanks in advance, I really hope you can help me with this, this is really important! =)

I basically have a PHP Search Form, and when a user fills in a form it outputs the results. Each result displays a image of a property, how could i make them images have their own unique link which will take them directly to the page of the property being shown?

Im using PHP and mySQL tables

Any help is appreciated,

Thank You.

Heres the PHP that outputs the results:
Code: [Select]

<?php
require_once 'mstr_ref.php';
function san($input){
if(get_magic_quotes_gpc()){
$input=stripcslashes($input);
}
$output = mysql_real_escape_string($input);
return $output;
}
if(isset($_POST['submit'])){
$pVars = array('area'=>$_POST['areas'], 'propType'=>$_POST['prop_type'], 'saleType'=>$_POST['ptype'], 'minB'=>$_POST['min_bedrooms'], 'maxB'=>$_POST['max_bedrooms'], 'minP'=>$_POST['min_price'], 'maxP'=>$_POST['max_price']);
foreach ($pVars as $k=>$v){
$v = san($v);
}
$sql = new makeQuery();
$sql->manAdd('location_id', $pVars['area']);
if($pVars['propType'] != 'Any'){
$sql->manAdd('catagory_id', $pVars['propType']);
}
if ($pVars['maxB'] > 0){
$sql->manAdd('bedrooms', $pVars['maxB'], '<=');
}
if($pVars['minB'] > 0){
$sql->manAdd('bedrooms',$pVars['minB'],'>=');
}
if($pVars['saleType'] != 'Any'){
if($pVars['saleType'] == "forsale"){
$sql->manAdd('market_type', 'sale');
if($pVars['minP'] != 0){
$pVars['minP'] = $pVars['minP'] * 1000;
}
if($pVars['maxP'] != 0){
$pVars['maxP'] = $pVars['maxP'] * 1000;
}
}
if($pVars['saleType'] == 'forrent'){
$sql->manAdd('market_type', 'rent');
}
}

$qry = $sql->sqlStart.$sql->stmt.'Group By property.id';
$results = mysql_query($qry) or die (mysql_error()."<br />|-|-|-|-|-|-|-|-|-|-|-|-<br />$qry");
if(mysql_num_rows($results) < 1){
die ("Sorry, No Results Match Your Search.");
}
while($row = mysql_fetch_assoc($results)){
echo '<div class="container" style="float:left;">';
echo '<div class="imageholder" style="float:left;">';
echo "<img class='image1' src='{$row['image_path']}' alt='{$row['summary']}'> <br />";
echo '</div>';
echo '<div class="textholder" style="font-family:helvetica; font-size:14px; float:left; padding-top:10px;">';
echo "{$row['summary']}";
echo "<span style=\"color:#63be21;\"><br><br><b>{$row['bedrooms']} bedroom(s) {$row['bathrooms']} bathroom(s) {$row['receptions']} reception room(s)</b></span>";
if($row['parking'] != null){
echo "<span style=\"color:#63be21;\"><b> {$row['parking']} parking space(s)</b></span>";
}

echo '</div>';
echo '<div style="clear:both"></div>';
}

}
else{
echo "There was a problem, please click<a href='index.php'> Here </a>to return to the main page and try again";
}
?>

Code: [Select]
<?php


if (!isset($_SESSION['user_id'])) {
    echo '<p class="login">Please <a href="login.php">log in</a> to access this page.</p>';
    exit();
  }
  else{ 

//Echo out the username of member
 
echo('<h3 class="login"> ' . $_SESSION['username'] . '\'s Settings </h3>');

     }
 mysqli_close($dbc);

$max_no_img=3; // Maximum number of images value to be set here
echo "<form method=post action=upload_project.php enctype='multipart/form-data'>";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>images $i</td><td>
<input type=file name='userfile[]' class='bginput'></td></tr>";
}
echo "<tr><td colspan=2 align=center><input type=submit value='Add image'></td></tr>";

echo "</form> </table>";


function findexts ($filename)
{
$filename = strtolower($filename) ;
$exts = split("[/\\.]", $filename) ;
$n = count($exts)-1;
$exts = $exts[$n];
return $exts;
}



for($i=0; $i < 3; $i++)
{

$ext = findexts ($_FILES['userfile']['name'][$i]) ;
$ran = rand () ;
$ran2 = $ran.".";
$add = "upload/";
$add = $add . $ran2.$ext;
$image[$i] = $ran2.$ext ;
move_uploaded_file($_FILES['userfile']['tmp_name'][$i], $add);
$new_id = $image[$i]++;
$pic =$new_id++;

$query = "INSERT INTO cycles (large_image1,large_image2,large_image3)". "VALUES ('$ran.$ext','$new_id','$pic')";

mysql_query($query) or die('database Query Error!');
}
echo "Successfully uploaded the image";


exit;
?>
Hi guys, I've been using this code to try and get image paths to upload to a database and store the image in a file called "upload/" but it doesnt seem to be working. I am also using two tables in my database and need to add into the script the user session id (user_id primary) from the current page and store it into the (user_id foreign) for the cycles tables.

thanks

<form id="test" action="<?php $_POST['SERVER_SELF'] ?>" method="POST" enctype="multipart/form-data" >     
  <div class="wrap">
<p>upload image here for Contact Page</p>

         <input type="file" name="image">    <br>
      <input name="about1" type="submit" value="Upload image"> <br>
            
</div>

 </form>


 <?php
//define a maxim size for the uploaded images in Kb
 define ("MAX_SIZE","100000"); 

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.
 function getExtension($str) {
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
 }

//This variable is used as a flag. The value is initialized with 0 (meaning no error  found)  
//and it will be changed to 1 if an errro occures.  
//If the error occures the file will not be uploaded.
 $errors=0;
//checks if the form has been submitted
 
 if(isset($_POST['about'])) 
 {
  //reads the name of the file the user submitted for uploading
  $image=$_FILES['image']['name'];
  //if it is not empty
  if ($image) 
  {
  //get the original name of the file from the clients machine
  $filename = stripslashes($_FILES['image']['name']);
  //get the extension of the file in a lower case format
   $extension = getExtension($filename);
  $extension = strtolower($extension);
  //if it is not a known extension, we will suppose it is an error and will not  upload the file,  
//otherwise we will do more tests
 if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
  {
//print error message
  echo '<h1>Unknown extension!</h1>';
  $errors=1;
  }
  else
  {
//get the size of the image in bytes
 //$_FILES['image']['tmp_name'] is the temporary filename of the file
 //in which the uploaded file was stored on the server
 $size=filesize($_FILES['image']['tmp_name']);

//compare the size with the maxim size we defined and print error if bigger
if ($size > MAX_SIZE*1024)
{
echo '<h1>You have exceeded the size limit!</h1>';
$errors=1;
}

//we will give an unique name, for example the time in unix time format
$image_name=contactbg.'.'.jpg;
//the new name will be containing the full path where will be stored (images folder)
$newname="C:/xampp/htdocs/Dirk-taat/wp-content/themes/dirktaat/images/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy($_FILES['image']['tmp_name'], $newname);
if (!$copied) 
{
echo '<h1>Copy unsuccessfull!</h1>';
$errors=1;
}}}}

//If no errors registred, print the success message
 if(isset($_POST['about']) && !$errors) 
 {
  echo "<h1>File Uploaded Successfully! Try again!</h1>";
 }   
 
  

//This function reads the extension of the file. It is used to determine if the file  is an image by checking the extension.
 

//This variable is used as a flag. The value is initialized with 0 (meaning no error  found)  
//and it will be changed to 1 if an errro occures.  
//If the error occures the file will not be uploaded.
 $errors=0;
//checks if the form has been submitted
 if(isset($_POST['about1'])) 
 {
  //reads the name of the file the user submitted for uploading
  $image=$_FILES['image']['name'];
  //if it is not empty
  if ($image) 
  {
  //get the original name of the file from the clients machine
  $filename = stripslashes($_FILES['image']['name']);
  //get the extension of the file in a lower case format
   $extension = getExtension($filename);
  $extension = strtolower($extension);
  //if it is not a known extension, we will suppose it is an error and will not  upload the file,  
//otherwise we will do more tests
 if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
  {
//print error message
  echo '<h1>Unknown extension!</h1>';
  $errors=1;
  }
  else
  {
//get the size of the image in bytes
 //$_FILES['image']['tmp_name'] is the temporary filename of the file
 //in which the uploaded file was stored on the server
 $size=filesize($_FILES['image']['tmp_name']);

//compare the size with the maxim size we defined and print error if bigger
if ($size > MAX_SIZE*1024)
{
echo '<h1>You have exceeded the size limit!</h1>';
$errors=1;
}

//we will give an unique name, for example the time in unix time format
$image_name=aboutme_bg.'.'.png;
//the new name will be containing the full path where will be stored (images folder)
$newname="C:/../.../../.../../.../images/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy($_FILES['image']['tmp_name'], $newname);
if (!$copied) 
{
echo '<h1>Copy unsuccessfull!</h1>';
$errors=1;
}}}}

//If no errors registred, print the success message
 if(isset($_POST['about1']) && !$errors) 
 {
  echo "<h1>File Uploaded Successfully! Try again!</h1>";
 }  

 }
 ?>



the above code works only for 1 upload box if more than one upload box it does not upload the file.

Thanks

hi guys here is my code i cant get a way to show multiple images for the map based on the address im using a geo coder. if i change imageicon=images[0] ; the 0 to 1 it prints the second image i am unable to get both printed
Can some1 direct me to link or please provide me with a solution .

while($row = mysql_fetch_array($rs)){
 
 $lat = $lat.$row['lat'].',';
 $long = $long.$row['lng'].',';
 $type = $type.$row['type'].',';
 $add =  $add.$row['address'].',';
 $name =  $name.$row['name'].',';
 $zip =  $zip.$row['pincode'].','; 
 }
 
 mysql_close($conn);

?>
 <script type="text/javascript">
   
   function initialize() {
     
    images = ["play_white_1.png","play_white.png"];
    var geocoder;
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      } 
    var map;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var address = new Array(); 
    address = "<?php echo $add; ?>";
   
            
    for(var i=0;i<address.length;i++)
    { 
            
     geocoder.geocode( { 'address': address[i] },  function(results, status)
      { if (status == google.maps.GeocoderStatus.OK)
       {
        map.setCenter(results[0].geometry.location);
                     
      var imageicon = ""; 
    
      imageicon=images[0] ;
                     
           var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location,
           icon:imageicon
        }); 
       marker.setMap(map);    
             }
    });     }   } 
       </script>
<body onload="initialize()">
 <div id="map_canvas" style="width: 500px; height: 480px;"></div>
 
</body> 

thanks

I am trying to write a script to handle multiple image uploads however i cant get it to work i am a total novice in php so please be kind in your replys :-)

[php]
<?php

$allowed_filetypes = array('.jpg','.gif','.bmp','.png','.JPG','.PNG','.BMP','.GIF'); //These will be the types of file that will pass the validation.
$upload_path = '../pic_upload/'; // The place the files will be uploaded to.

foreach ($_FILES["pictures"]["error"] as $key => $error)
{
$filename = $_FILES['pictures']['name'][$key];
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);

if(!empty($filename))        //is it empty
{
if ($_FILES["pictures"]["size"][$key] >= 9000000)
 die ('Sorry the picture is too Big!');
}

if(!empty($filename))        //Is it empty
{
if(!in_array($ext,$allowed_filetypes))                                           //Is the file Allowed
      die('The file you attempted to upload is not allowed! Pictures only!.');
}

if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["pictures"]["tmp_name"][$key];
        $name = $_FILES["pictures"]["name"][$key];
        move_uploaded_file($tmp_name, "$upload_path/$ran$name");

if (!$i++) print "<!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>Untitled Document</title>
</head>

<body>
<div align=\"center\"><img src=\".../image/8-1.gif\" width=\"100\" height=\"100\" /></div>
<form id=\"form1\" name=\"form1\" method=\"get\" action=\"reg.php\">
<div align=\"center\">
        <input type=\"submit\" name=\"button\" id=\"button\" value=\"Submit\" />
        <input type=\"hidden\" name=\"reg\" value=\"6\">
  <p>\n";

print "<input type=\"hidden\" name=\"pic$key\" value=\"$ran$name\">\n";


if (!$i++) print "</p>
  <p>
    <label>
      </div>
    </label>
  </p>
</form>
<p>&nbsp;</p>
</body>
</html>\n";

} }
?> 
[php]

i have done a coding for image multiple upload , the coding is working perfectly when i store image in the image folder but when trying to insert the image name in database its not working.
important thing is while we store the value of images it should store in single column seperated with comma or special character. like this

id image
1 car.jpg,bike.jpg,sun.jpg

pls help to me, thanks in advance.

Here is the code.
img.php
<?php
$max_no_img=5; // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
<input type=file name='images[]' class='bginput'></td></tr>";
}
echo "<tr><td colspan=2 align=center><input type=hidden name='userid' value='68'></td></tr>";

echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>";

echo "</form> </table>";



?>

addimgck.php

<?php
ini_set('display_errors', 1);
ini_set('error_reporting', E_ALL);
function findexts ($filename) { $filename = strtolower('$filename') ;
$exts = preg_split("[/\\.]", $filename) ;
$n = count($exts)-1;
$exts = $exts[$n];
return $exts;
}

$ext = findexts ($_FILES['images']['name']) ;
$ran = rand ();
$ran2 = $ran.".";


while(list($key,$value) = each($_FILES['images']['name']))
{
if(!empty($value))
{
$filename = $ran.$value;
$filename=str_replace(" "," _ ",$filename);// Add _ inplace of blank space in file name, you can remove this line




$add = "images/$filename";
$insert_query = 'insert into image (


photo


)
values
(


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


mysql_query($insert_query);



}

}


?>

Greetings.. 

I have an ajax application i'm creating, that allows uploading images 1 at a time.  That part works, and it works well.  What I need to know now, is how would I go about converting the existing code I have, to change the sizing of it twice as well as renaming the images to something more website friendly.

here is the code that i currently have, im sure this is easy but as i can't find any workable code on the google, i am lost as to how to modify it.  so any help is appreciated.

Code: [Select]
<script language="JavaScript" type="text/javascript">
if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(window.parent.document.form1.filefieldname.value)) {
window.parent.document.form1.filefieldname.value = "";
} else {
<?php
function rrmdir($dir) { 
if (is_dir($dir)) { 
      $objects = scandir($dir); 
      foreach ($objects as $object) { 
        if ($object != "." && $object != "..") { 
          if (filetype($dir."/".$object) == "dir") rrmdir($dir."/".$object); else unlink($dir."/".$object); 
} 
      }  
     reset($objects); 
     rmdir($dir); 
    } 
  } 

$folder = isset($_POST['folder']) ? $_POST['folder'] : '';
if($folder == '') {
$rand = rand(5, 1000000);
$folder = 'temp'.$rand;
?>
window.parent.document.form1.folder.value = "<?php echo $folder; ?>";
<?php
}
if(!is_dir("../uploads/".$folder)) {
mkdir('../uploads/'.$folder);
} else {
$rand = rand(5, 100000);
$folder = $folder.''.$rand;
mkdir('../uploads/'.$folder);
}
$image_name = $_FILES["filefieldname"]["name"];
$newname = "../uploads/".$folder."/".$image_name;
move_uploaded_file($_FILES["filefieldname"]["tmp_name"], $newname);
?>
var parDoc = window.parent.document;
var A = window.parent.document.form1.upload_cnt.value;
A = Number(A);
B = 1;
var cnt = A + B;
if(cnt == '8') {
window.parent.document.form1.filefieldname.disabled=true;
}
parDoc.getElementById('upload_cnt').value = cnt;
parDoc.getElementById('files_list').innerHTML += '<br><a href="../uploads/<?php echo $folder.'/'.$_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] 
?></a>';
window.parent.document.form1.filefieldname.value="";
}
</script>

Hi
I want to allow users to upload multiple pictures and allow the user to rearrange the order before being uploaded. I have some javascript which populates a select tag with the image names after selecting an image to upload, and some other javascript that allows the users to move the options up and down the list. So it ouputs code such as this to user if they have selected 2 image files for uploading:

<select size="6" id="file_list" name="file_list">               
            <option value="file_0">DSCN2794.JPG</option>
                                 <option value="file_1">DSCN2787.JPG</option>
</select>

I dont know if this is the correct way of approaching it because then in the back end, I use $_FILES, which doesn't care what order the options are in the select tag....
Any advice?
Thanks!

I am VERY new to PHP, but I am trying to adapt code from http://www.4wordsystems.com/php_image_resize.php to work with multiple images.  Can any please help?

I know I need to place it in a loop of some kind, but I don't know how to write the code for that.  Here is the code:

HTML FORM CODE:
Code: [Select]
<form action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" name="uploadfile"/>
<input type="submit"/>
</form>
upload.php CODE:
Code: [Select]
<?php

// This is the temporary file created by PHP
$uploadedfile = $_FILES['uploadfile']['tmp_name'];

// Create an Image from it so we can do the resize
$src = imagecreatefromjpeg($uploadedfile);

// Capture the original size of the uploaded image
list($width,$height)=getimagesize($uploadedfile);

// For our purposes, I have resized the image to be
// 600 pixels wide, and maintain the original aspect
// ratio. This prevents the image from being "stretched"
// or "squashed". If you prefer some max width other than
// 600, simply change the $newwidth variable
$newwidth=600;
$newheight=($height/$width)*600;
$tmp=imagecreatetruecolor($newwidth,$newheight);

// this line actually does the image resizing, copying from the original
// image into the $tmp image
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

// now write the resized image to disk. I have assumed that you want the
// resized, uploaded image file to reside in the ./images subdirectory.
$filename = "images/". $_FILES['uploadfile']['name'];
imagejpeg($tmp,$filename,100);

// For our purposes, I have resized the image to be
// 150 pixels high, and maintain the original aspect
// ratio. This prevents the image from being "stretched"
// or "squashed". If you prefer some max height other than
// 150, simply change the $newheight variable
$newheight=150;
$newwidth=($width/$height)*150;
$tmp=imagecreatetruecolor($newwidth,$newheight);

// this line actually does the image resizing, copying from the original
// image into the $tmp image
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

// now write the resized image to disk. I have assumed that you want the
// resized, uploaded image file to reside in the ./images subdirectory.
$filename = "images/thumb_". $_FILES['uploadfile']['name'];
imagejpeg($tmp,$filename,100);

imagedestroy($src);
imagedestroy($tmp); // NOTE: PHP will clean up the temp file it created when the request
// has completed.

echo "Successfully Uploaded: <img src='".$filename."'>";

?>

what's wrong with this ?  i can't upload

I am in the process of writing a CMS for a friend that is looking to add a classified section to his site. He will be the only one that will ever use it.

I got the code to work with one image when he asked me if I could do it so he could post 6 images for each item. I am unable to figure out how to do this. I was told to do this with a while loop.

This is the code that I have written so far.

<?php

//Check to make sure title is filled in. If not redirects to show_add.php
if (!$_POST[title]) {
header("Location: show_add.php");
exit;
} else {
//check and see if a session has started
session_start();
}
//if session has not been properly started redirects back to the administration menu
if ($_SESSION[valid] != "yes") {
header("Location: admin_menu.php");
exit;
}

include('includes/connection.php');


//check and see if the type of uploaded file is an image
function is_valid_type($file) {
$valid_types = array("image/jpg", "image/jpeg", "image/gif", "image/bmp");

if (in_array($file['type'], $valid_types))
return 1;
return 0;
}

//Set Constants
$TARGET_PATH = "/home/content/m/i/k/mikedmartiny/html/db_images/";

$title = $_POST['title'];
$year = $_POST['year'];
$make = $_POST['make'];
$model = $_POST['model'];
$descript = $_POST['descript'];
$image = $_FILES['image'];

//Sanitize the inputs
$title = mysql_real_escape_string($title);
$year = mysql_real_escape_string($year);
$make = mysql_real_escape_string($make);
$model = mysql_real_escape_string($model);
$descript = mysql_real_escape_string($descript);
$image['name'] = mysql_real_escape_string($image['name']);

//$target_path full string
$TARGET_PATH .= $image['name'];

//make sure that all fields from form are filled in
if ( $title == "" || $year == "" || $make =="" || $model == "" || $descript == "" || $image['name'] == "") {
$_SESSION['error']  = "ALL FIELDS ARE REQUIRED!";
header ("Location: show_add.php");
exit;
}

//check to make sure it has the right file type
if (!is_valid_type($image)){
$_SESSION['error'] = "You must upload a jpeg, gif, or bmp";
header ("Location: show_add.php");
exit;
}

//check to see if a file with that name exsists
if (file_exists($TARGET_PATH)){
$_SESSION['error'] = "A FILE WITH THAT NAME ALL READY EXIST!";
header ("Location: show_add.php");
exit;
}

//move the image - write path to database
while($image <=2) {
move_uploaded_file($image['tmp_name'], $TARGET_PATH)
} else {
// Make sure you chmod the directory to be writeable
$_SESSION['error'] = "COULD NOT UPLOAD FILE. CHECK WRITE/REWRITE PERMISSIONS ON THE FILE DIRECTORY!";
header ("Location: show_add.php");
exit;
}

$sql = "INSERT INTO $table (id, title, year, make, model, descript, image, image_two) VALUES ('', '$_POST[title]', '$_POST[year]', '$_POST[make]', '$_POST[model]', '$_POST[descript]', '" . $image['name'] . "', '" . $image['name'] . "')";

$result = mysql_query($sql) or die ("Could not insert data into DB: " . mysql_error());

?>


I only have it set up to work with 2 images right now. I thought it would be easier to get it to work properly. Then I could just add in the rest of the info later.

Any help would be greatly appreciated.

Hello everybody, i have an easy short code to upload multiple photos to "images" directory. after upload each file, i give it unique name.   the problem i have is: i want see the name of uploaded files and print this using echo as in line 21. the line 21 gives me names but not the same names of uploaded files!   thank you very much for your help. Rafal

<?php
foreach ($_FILES['file']['name'] as $i => $name)
{
$types = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $name);
$extension = end($temp);
if ($_FILES["file"]["size"][$i] < 10240000 && in_array($extension, $types))
{
if ($_FILES["file"]["error"][$i] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"][$i] . "<br>";
}
else
{
if (file_exists("images/" . $name))
{
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"][$i], "images/" . uniqid() . "." . $extension);
echo "uploaded&nbsp;" . $_FILES["file"] , uniqid() . "." . $extension ;
echo "<br>";
}
}
}
else
{
$error =  "Invalid file";
}
}
?>
<html>
<head>
<title></title>
</head>
<body>
<form enctype="multipart/form-data" action="photo.php" method="POST">
<input type="file" name="file[]" id="file" ><br>
<input type="file" name="file[]" id="file" ><br>
<input type="file" name="file[]" id="file" ><br>
<input type="file" name="file[]" id="file" ><br>
<input type="submit" value="upload">
</form>
</body>
</html>

Below is a page which is supposed to output the name, blog contribution and picture of contributing members of a website.
<div id="blog_content" class="" style="height:90%; width:97%; border:5px solid #c0c0c0; background-color: #FFFFFF;"> <!--opens blog content--> 



                             
<?php


//address error handling

ini_set ('display_errors', 1);
error_reporting (E_ALL & ~E_NOTICE);



//include the config file

require_once("config.php");



//Define the query. Select all rows from firstname column in members table, title column in blogs table,and entry column in blogs table, sorting in ascneding order by the title entry, knowing that the id column in mebers table is the same as the id column in blogs table.


$sql = "SELECT


    blogs.title,blogs.entry,members.firstname,images.image
FROM
    blogs
LEFT JOIN
    members
ON
    blogs.member_id = members.member_id
LEFT JOIN
    images
ON
    blogs.member_id = images.member_id

ORDER BY
     blogs.title ASC

"; 

$query = mysql_query($sql);

                 if($query !== false && mysql_num_rows($query) > 0)

                 {

         while(($row = mysql_fetch_assoc($query)) !== false)

         {

 echo

                
                              '<div id="blog_content1" style="float:left; position:relative;bottom:18px;left:13px; background-color: #FFFFFF; height:16.7%; width:100%; border:0px none none;"                              
                              <!--opens blog_content1  same as main center top 1 and 2 from index page everything scaled down by a factor of 3, heightwise--> 
        
 
                                   <div class="red_bar" style="height:3%; width:100%; border:1px solid #959595;"> <!--a--> 
 
                                       <div class="shade1" style="height:5px; width:100%; border:0px none none;"> </div>                                      
                                       <div class="shade2" style="height:5px; width:100%; border:0px none none"> </div> 
                                       <div class="shade3" style="height:5px%; width:100%; border:0px none none"> </div>

 
                                   </div> <!-- closes red bar--> 
 
 
 
                                   <div class="content" style="height:28.3%; width:100%; border:0px none none;"> <!----> 
 
                                       
                                           <div class="slideshow" id="keylin" style="float:left; width:20%;  border:0px none none;"> <!--a-->
 
                                                  
                                                  
 
                                                 <div><img header("Content-type: image/jpeg"); name="" alt="" id="" height="105" width="105" src="$row[image]" /></div>                              
 
 
                                       
                                           </div> <!-- closes pic--> 
 
 
 
                                           <div class="content_text"  style="float:right;  position:relative;top:7px;left:0px; max-height:150px; width:78.5%; border-width:4.5px; border-bottom-style:solid; border-right-style:solid; border-color:#c0c0c0; "> <!--a-->'; 
 
                                           

                                               
                                                echo "<h3>".$row['title']."</h3>";

echo "<p>" .$row['entry']."<br />".$row['firstname']."</p>";

         
                                             
                                                                                           
                                           echo                                         
                                           '</div> <!-- closes content text--> 
 
  
                                   </div> <!-- closes content--> 
 
                                   
                                                                                                                                                                                                                            
                            </div> <!-- closes blog_content1-->';



                                                 }

                 }

                 else if($query == false)

                 {

               

 echo "<p>Query was not successful because:<strong>".mysql_error()."</strong></p>";

         echo "<p>The query being run was \"".$sql."\"</p>";

                 }

                 else if($query !== false && mysql_num_rows($query) == 0)

                 {

         echo "<p>The query returned 0 results.</p>";

                 }


                                                 mysql_close(); //Close the database connection.





                                                 ?> 

                      
                        </div> <!-- closes blog content-->


The select query is designed to retrieve all the blog contributions(represented by the fields blogs.title and blogs.entry) from the database, alongside the contributing member (member.firstname) and the member's picture(images.image), using the member_id column to join the 3 tables involved, and outputs them on the webpage.   The title, entry and firstname values are successfully displayed on the resulting page.  However, I can't seem to figure out how to get the picture to be displayed.  Note that the picture was successfully stored in the database and I was able to view it on a separate page using a simple select query.  It is now just a question of how to get it to display on this particularly crowded page.  Anyone knows how I can output the picture in the img tag?  I tried placing the header("Content-type: image/jpeg"); statement at the top of the php segment, then just right below the select query and finally just right above the img tag, but in every case, I just got a big white blank page starring at me.  How and where should I place the header statement? And what else am I to do to get this picture displayed?  Any help is appreciated.

Hello,

 

I'm developing one website for a real-estate agency. I have a html form that is used to submit property details, There is multiple form inputs and also I need to upload multiple property images using Dropzone JS multiple image upload.

Here I'm validating form inputs using jQuery Validation library. Validation works perfect and data Is being to posted to php file called submit_property_data.php. But when I implement the Dropzone JS image upload its not working.

 

JS File (property-submit.js)

 

$('document').ready(function() {
  $("#notification-property").hide();

  /* handling form validation */
  $("#property-form").validate({
    rules: {
      prop_title: "required",
      prop_price: {
        required: true,
        digits: true
        },
      prop_area: {
        required: true,
        digits: true
      },
      prop_address: "required",
      prop_message: {
        required: true,
        minlength: 10,
        maxlength: 2000
      },
      prop_owner_name: "required",
      prop_owner_email: {
        required: true,
        email: true
      },
      prop_owner_phone: {
        required: true,
        digits: true
      },
    },
    messages: {
      'prop_title': {
        required: "Please enter title for your property"
      },
      prop_price: {
        required: "Please enter price of your property",
        digits: "Please enter price in digits (AED)"
      },
      prop_area: "Please enter Sqft of your property",
      prop_address: "Please enter address of your property",
      prop_message: {
        required: "Please enter detailed Information",
        minlength: "Please enter something about your property in 50 - 20000 characters",
        maxlength: "Please enter something about your property in 50 - 20000 characters"
      },

			prop_owner_name: "Please enter your name",
			prop_owner_email: {
				required: "Please enter your email address",
				email: "Please enter valid email address"

			},
			prop_owner_phone: {
				required: "Please enter your phone number",
				digits: "Please enter valid phone number"

			},
    },
    submitHandler: submitPropertyForm
  });

  /* Handling login functionality */
  function submitPropertyForm() {
    var data = $("#property-form").serialize();
    $.ajax({
      type: 'POST',
      url: 'submit_property_data.php',
      data: data,
      beforeSend: function() {
        $("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; Submiting ...');
      },
      success: function(response) {
        if (response == "ok") {
          console.log(1);
          document.getElementById("property-form").reset();
          $("#notification-property").html('<b> ' + response + ' !</b>').show();
          //setTimeout(' window.location.href = "dashboard.php"; ',4000);
        } else {
          $("#notification-property").fadeIn(1000, function() {
            $("#notification-property").html('<b>' + response + ' !</b>').fadeOut();
            $("#submit-button").html('&nbsp; Send');
          });
        }
      },
			complete:function(){
											 $('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
									 }
    });
    return false;
  }

    $("#submit-button").bind('click', function() {
	  if ( $("#property-form").valid() ) {
		  submitPropertyForm();
	  } else {
		  console.log('form invalid');
	  }
  })


		Dropzone.autoDiscover = false;
		$(function () {
				$("div#myDropzone").dropzone({

						url: 'submit_property_data.php',
						addRemoveLinks: true,
						maxFiles:11,
						uploadMultiple: true,
						autoProcessQueue: false,
						parallelUploads: 10,

						init: function () {

								var myDropzone = this;

								// Update selector to match your button
								$("#submit-button").click(function (e) {
										e.preventDefault();
										myDropzone.processQueue();
								});


								this.on('sending', function(file, xhr, formData) {
										// Append all form inputs to the formData Dropzone will POST
										var data = $('#property-form').serializeArray();
										$.each(data, function(key, el) {
												formData.append(el.name, el.value);
										});
								});

									this.on("success", function(file, responseText) {
											alert(responseText);
									});

							},


				});
		});


});

 

HTML File (submit-property.php)

 

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

!-- Submit Property start -->
<div class="content-area-7 submit-property">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

          <!--      <div id="error_message" class="notification-box"></div> -->





            </div>
            <div id="notification-property" class="notification-box">sd</div>

            <div class="col-md-12">
                <div class="submit-address">
                    <form name = "property-form" method="post" id="property-form">
                        <div class="main-title-2">
                            <h1><span>Tell Me</span> Something About Your Property</h1>
                        </div>
                        <div class="search-contents-sidebar mb-30">
                            <div class="form-group">
                                <label>Property Title</label>

                                <input class="input-text" name="prop_title" id="prop_title" placeholder="Property Title">

                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select class="selectpicker search-fields" id="prop_status" name="prop_status">
                                            <option value="Sale">For Sale</option>
                                            <option value="Rent">For Rent</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label>Type</label>
                                        <select class="selectpicker search-fields" id="prop_title" name="prop_type">
                                            <option value="Modern">Modern</option>
                                            <option value="Traditional">Traditional</option>
                                            <option value="Arabic">Arabic</option>

                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Price (Dirham)</label>
                                        <input class="input-text" name="prop_price" id="prop_price" placeholder="AED">

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Sqft</label>
                                        <input class="input-text" name="prop_area" id="prop_area" placeholder="SqFt">

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bed Rooms</label>
                                        <select class="selectpicker search-fields" name="prop_rooms" id="prop_rooms">

                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>

                                        </select>

                                    </div>
                                </div>
                                <!-- <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bathroom</label>
                                        <select class="selectpicker search-fields" name="1">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                        </select>
                                    </div>
                                </div> -->
                            </div>
                        </div>


                        <div class="main-title-2">
                            <h1><span>Location</span></h1>
                        </div>
                        <div class="row mb-30 ">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Address</label>
                                    <input class="input-text" id="prop_address" name="prop_address"  placeholder="Address">
                                </div>

                            </div>



                        </div>

                        <div class="main-title-2">
                        <h1><span>Upload</span> Photos Of Villa </h1>
                        </div>

                        <div id="myDropzone" class="dropzone dropzone-design mb-10">
                          <div class="dz-default dz-message" data=""><span>Drop files here to upload</span></div>
                                                </div>

                        <div class="main-title-2">
                            <h1><span>Detailed</span> Information</h1>
                        </div>



                        <div class="row mb-30">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea class="input-text" id="prop_message" name="prop_message" placeholder="Detailed Information"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row mb-30">
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Building Age <span>(optional)</span></label>
                                    <select class="selectpicker search-fields" name="years">
                                        <option>0-1 Years</option>
                                        <option>0-5 Years</option>
                                        <option>0-10 Years</option>
                                        <option>0-20 Years</option>
                                        <option>0-40 Years</option>
                                        <option>40+Years</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Bedrooms (optional)</label>
                                    <select class="selectpicker search-fields" name="1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Bathrooms (optional)</label>
                                    <select class="selectpicker search-fields" name="1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <label class="margin-t-10">Features (optional)</label>
                                <div class="row">
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_parking" name="opt_parking" value="1" type="checkbox">
                                            <label for="checkbox1">
                                                Free Parking
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_air_condition" name="opt_air_condition" value="1" type="checkbox">
                                            <label for="checkbox2">
                                                Air Condition
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_seat" name="opt_seat" value="1" type="checkbox">
                                            <label for="checkbox3">
                                                Places to seat
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_swimming" name="opt_swimming" value="1" type="checkbox">
                                            <label for="checkbox4">
                                                Swimming Pool
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_laundary" name="opt_laundary" value="1" type="checkbox">
                                            <label for="checkbox5">
                                                Laundry Room
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_window_covering" name="opt_window_covering" value="1" type="checkbox">
                                            <label for="checkbox6">
                                                Window Covering
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_parking" name="opt_parking" value="1" type="checkbox">
                                            <label for="checkbox7">
                                                Central Heating
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox8" type="checkbox">
                                            <label for="checkbox8">
                                                Alarm
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                        <div class="main-title-2">
                            <h1><span>Contact</span> Details</h1>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input class="input-text" name="prop_owner_name" id="prop_owner_name" placeholder="Name">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input class="input-text" name="prop_owner_email" id="prop_owner_email" placeholder="Email">
                                </div>
                            </div>

                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Contact No</label>
                                    <input class="input-text" name="prop_owner_phone" id="prop_owner_phone" placeholder="Phone">
                                </div>
                            </div>



                            </div>
                            <div class="col-md-12">
                                <button type="button" name="submit-button" id="submit-button">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="property-submit.js"></script>
<script src="js/dropzone.js"></script>

</html>

 

PHP File (submit_property_data.php)

 

<?php
echo "ok";
require_once("functions.php");


$ds          = DIRECTORY_SEPARATOR;  //1
$storeFolder = 'villas-images';
$encpt_data = rand(1000,5000);

if (!empty($_FILES)) {

   $tempFile = $_FILES['file']['tmp_name'];          //3

   $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

   $targetFile =  $targetPath.$_FILES['file']['name'];  //5

   if(move_uploaded_file($tempFile,$targetFile))
   {

     echo '<b>Success</b>';


   }
}
?>

 

What I actually need ?

 

I need to validate the form inputs first & upload the images once the form is valid also I need to post all the inputs to my php file called submit_property_data.php

Also I need the image inputs to store into my database.