multifile image upload en thumb weergave

nuet · do 9 jan 2014

Een tijd geleden had ik dit gemaakt voor iemand die meerdere images tegelijk wilde uploaden en direct getoond wilde zien in thumbnailformaat.
Handmatig moet er wel een map 'images' aangemaakt worden met daarin een map 'thumbs'
Als er verbeteringen mogelijk zijn hoor ik het graag.
Voorbeeld: http://www.jackmaessen.nl/test/multifile_image_upload.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
   /* images getoond met breedte 100px en hoogte na rato */
img {
width: 100px;
height: auto;
}
</style>

</head>
<body>
<?php

error_reporting(E_ALL);

$resultaat[] = '';
echo implode(array_unique($resultaat)); // melding geven of uploaden goed of fout is gegaan
if($_SERVER['REQUEST_METHOD'] == 'POST') {

//definities	
$i=0;

// functie image extensie
function get_image_extension($name) {
   $name = strtolower($name);
	 $i = strrpos($name,".");
	 if (!$i) { return ""; }	
	     $l = strlen($name) - $i;
			 $extension = substr($name, $i+1,$l);
			 return $extension;
	}
	
  // check of veld leeg is
  if($_FILES['upload']['name'][$i] == "") {
	    echo 'Inputveld is leeg. Browse eerst voor een image en klik dan op Upload Bestanden!<br /><br />';
	}	
	else {
	
// upload bestand(en)
for($i=0; $i<count($_FILES['upload']['name']); $i++) {
	$maximum_size = $_POST['maxsize']; // maximum groote in bytes (5Mb) in form bepaald
	//tijdelijke filepath
	$filename = $_FILES['upload']['name'][$i];
  $tmpfilepath = $_FILES['upload']['tmp_name'][$i];
	$size=filesize($_FILES['upload']['tmp_name'][$i]);
	
		
	// check grootte bestand
	if ($size > $maximum_size) {
	$resultaat[] = 'Bestand(en) is te groot!<br /><br />';
	
	}
		
  $extension = get_image_extension($filename);
  // controle op extensies
  if(($extension != "jpg") && ($extension != "jpeg") && ($extension != "gif") && ($extension != "png")) {
  
	$resultaat[] = 'Bestand(en) is geen image!<br /><br />';
  
	}
		
  //filepath aanmaken
  elseif ($tmpfilepath != ""){
    //nieuwe filepath aanmaken
    $newfilepath = "./images/thumbs/" . $_FILES['upload']['name'][$i];

    //Upload file naar definitive map
		
   if(move_uploaded_file($tmpfilepath, $newfilepath)) {
        
        //evt echo's
         $resultaat[] = 'Bestand(en) successvol geupload!<br /><br />';
     }
     else {
          $resultaat[] = 'Er is iets fout gegaan met uploaden! Probeer opnieuw';
          }      
  }
}


}

} // eind ['REQUEST_METHOD']

echo implode(array_unique($resultaat));
?>

<!-- De form -->
Klik op browse om bestanden te uploaden<br /><br />
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="maxsize" value="5000000"> <!-- max 5 Mb groot -->
<input name="upload[]" type="file" multiple="multiple" />
<input type="submit" value="Upload Bestanden">

<!-- De images -->
<div id="wrapper" style="width: 550px">
<?php
// de geuploade images gelijk tonen op pagina
    $show_images = opendir(dirname(realpath(__FILE__)).'/images/thumbs/');
    while($file = readdir($show_images)){
		if($file !== '.' && $file !== '..'){
    echo '<img src="images/thumbs/'.$file.'" style="padding:5px;"  />'; // images 5px uit elkaar
		
    }
   }
?>
</div>
</body>
</html>

vinTage · ma 13 jan 2014

Dat handmatig aanmaken van een map zou je ook kunnen automatiseren he, d.m.v mkdir
Die hidden input voor de filesize is wel heel erg makkelijk te omzeilen en ik kan zo (de default) 100 mb uploaden :P
Je voorbeeld toont geen thumbs maar de volledige (geschaalde) image, dit komt omdat er geen thumbs gemaakt worden, dit doe je namelijk met imagecreatefromjpeg en de broertjes van deze function voor gif en png.
Je kunt dan ook de kwaliteit van de images beinvloeden en dus de filesize knijpen voor de thumbs.

ook kun je voor de controle van de extentie een array gebruiken zodat de klant redelijk simpel zelf een nieuwe filetyp kan toevoegen


$extensions[] = 'jpg';
$extensions[] = 'png';
$extensions[] = 'gif';
$extensions[] = 'bmp';
//etc


if(!in_array($extention, $extensions))
{
	//fout
}

Dit zijn maar even de puntjes die ik zo snel zie die verbetering kunnen gebruiken.
Ook zou je een javascriptje kunnen toevoegen die een nieuwe file-input in het form pleurt zodra er er geen empty fileinput meer is in het form.

Edit, hmm weird, als ik bovenstaande post maakt, kon ik niet scrollen in het inputveld, in edit-mode wel ?
Ik heb mezelf ooit een keer proberen te verdiepen in OOP, en dit was mijn eerste ding (is dus bagger zoals het groot is, maar het gaat om het idee (van resizen), misschien kun je er iets mee...


<?php
  /**
   * Upload images trough php.
   * Supported filetypes: gif, jpg and png.
   * Option to scale the images to a given maximum size and keep its transparency.
   * Option to set compression ( save lower quality to save space/bandwidth (not for gif files) ).
   * Option to set a default filenaam which cannot be overwritten.
   *
   * @author vinTage <vintage@vintagesworld.be>
   * @ many thanks to php.net and its contributors 
   * @version 1.2
   */
  
  class ImgUpload
  {
      private $img;
      private $path;
      private $name;
      private $ext;
      private $width;
      private $height;
      
      /**
	  * The constructor sets a reference to the uploaded file
	  * offtopic note: a setting of 75 for the quality will do fine and "match" the originals quality => google for "IJG quality"
	  * @param  file path [,new filename]
	  * @return resource
	  */
	  public function __construct($file, $path, $default_name = '')
      {
          if (empty($file['name']))
          {
              throw new Exception('Kies een image');
          }
          else
          {
              $extention = pathinfo($file['name']);
              $this->ext = strtolower($extention['extension']);
          }
          
          if (!in_array($this->ext, array('jpg', 'gif', 'png')))
          {
              throw new Exception('Filetype niet ondersteund');
          }
          
          if (!is_dir($path))
          {
              throw new Exception('upload directory bestaat niet');
          }
          
          $this->img = $file;
          $this->path = $path;
          
          /**
		  * if a new name is set, look in the target directory if this file allready excists
		  * if the file excists, raise a sequence number and add it to the filename
		  */
          if ($default_name != '')
          {
              $this->name = $default_name;
              
              $img_counter = 0;
              while (file_exists($this->path . '/' . $this->name . $img_counter . '.' . $this->ext))
              {
                  $img_counter++;
              }
              $this->name = $this->path . '/' . $this->name . $img_counter . '.' . $this->ext;
          }
          else
          {
              /**
			  * keep original filename
			  */
              $this->name = $this->path . '/' . $file['name'];
          }
          
		  /**
		  * move to target directory
		  */
          move_uploaded_file($file['tmp_name'], $this->name);
      }
      
      /**
	  * resize to maximum width/height [optional compression/not for gif]
	  * return resource
	  */
      public function scaleToMax($maxSize, $quality = 75) //75 is good/best => google for "IJG quality"
      {
          /**
		  * check for valid size and quality variables
		  */
		  if(!is_int($maxSize) || !is_int($quality) || $quality > 100 || $quality < 0 || $maxSize < 10 )
		  {
			  throw new Exception('ongeldige input voor size en of compressie');
		  }
								
          /**
		  * get the width & height from the uploaded image
		  */
		  list($width, $height) = getimagesize($this->name);
          
          $orginal_width = $width;
          $original_height = $height;
          
          /**
		  * resize to the given maximum size if the image is larger than the maxSize
		  */
		  if ($width >= $height && $width > $maxSize)
          {
              $this->width = $maxSize;
              $temp = $orginal_width / $maxSize;
              $this->height = $original_height / $temp;
          }
          elseif ($height > $width && $height > $maxSize)
          {
              $this->height = $maxSize;
              $temp = $original_height / $maxSize;
              $this->width = $orginal_width / $temp;
          }
          else
          {
              $this->width = $width;
              $this->height = $height;
          }
          
          $img_type = '';
          $ictc = imagecreatetruecolor($this->width, $this->height);
          if (!$ictc)
          {
              throw new Exception('GD probleem');
          }
          
          /**
		  * resize the uploaded image, depending on its extension
		  */
		  switch ($this->ext)
          {
              case "gif":
                  $img_type = imagecreatefromgif($this->name);
                  if (!$img_type)
                  {
                      throw new Exception('GD probleem');
                  }
                  $originaltransparentcolor = imagecolortransparent($img_type);
                  if ($originaltransparentcolor >= 0 && $originaltransparentcolor < imagecolorstotal($img_type))
                  {
                      $transparentcolor = imagecolorsforindex($img_type, $originaltransparentcolor);
                      $newtransparentcolor = imagecolorallocate($ictc, $transparentcolor['red'], $transparentcolor['green'], $transparentcolor['blue']);
                      imagefill($ictc, 0, 0, $newtransparentcolor);
                      imagecolortransparent($ictc, $newtransparentcolor);
                  }
                  imagecopyresampled($ictc, $img_type, 0, 0, 0, 0, $this->width, $this->height, $width, $height);
                  /**
				  * ignore compression variable here, imagegif() doest support compression
				  */
				  imagegif($ictc, $this->name);
                  break;

              case "jpg":
                  $img_type = imagecreatefromjpeg($this->name);
                  if (!$img_type)
                  {
                      throw new Exception('GD probleem');
                  }
                  imagecopyresampled($ictc, $img_type, 0, 0, 0, 0, $this->width, $this->height, $width, $height);
                  imagejpeg($ictc, $this->name, $quality);
                  break;

              case "png":
                  $img_type = imagecreatefrompng($this->name);
                  if (!$img_type)
                  {
                      throw new Exception('GD probleem');
                  }
                  imagealphablending($ictc, false);
                  imagesavealpha($ictc, true);
                  imagealphablending($img_type, true);
                  imagecopyresampled($ictc, $img_type, 0, 0, 0, 0, $this->width, $this->height, $width, $height);
                  /**
				  * compression settings for png is different than jpg compression, so calculate back
				  */
                  imagepng($ictc, $this->name, ceil(9 - ( $quality / 100) * 9) );
                  break;
          }
          /**
		  * clear the cache
		  */
		  imagedestroy($img_type);
          imagedestroy($ictc);
      }
      
      
	  /**
	  *return string - path to your uploaded image
	  */
      public function showNewFile()
      {
          return $this->name;
      }
  }
?>

admin · ma 13 jan 2014

vinTage schreef:: Edit, hmm weird, als ik bovenstaande post maakt, kon ik niet scrollen in het inputveld, in edit-mode wel ?

Ja net even geprobeerd, als ik deze post edit kan ik scrollen, maar ik begrijp dat jij niet kon scrollen? zal eens ff testen met een nieuwe post...
Edit
Als het goed is werkt nu de scroll functie maar laat aub weten als een en ander nog niet goed functioneert.
Wat betreft de inhoud van post hierboven: ik ga me daar eens over buigen. Is voor mij interessant en leerzaam

vinTage · ma 13 jan 2014

Kan nog altijd niet scrollen, maar dat komt doordat deze textarea overflow:hidden heeft.

nuet · ma 13 jan 2014

hmmm...vreemd, ik heb dit getest op FF en ik kan nu scrollen; die overflow stond idd op hidden maar ik heb deze regels in de css erbij gevoegd voor de overschrijving:
Overigens ik zit nu zelf op FF dit te typen
Hieronder de css die ik erbij heb gezet:


/* textarea overflow aangepast */
.CommentForm textarea.TextBox {
	overflow-y: scroll !important;
	overflow-x: hidden !important;
}
.TextBoxWrapper textarea {
overflow-y: scroll !important;
	overflow-x: hidden !important;	
}
#DiscussionForm textarea.TextBox {
overflow-y: scroll !important;
	overflow-x: hidden !important;	
}

Ik type nog even verder en voeg een snapshot toe van deze post zodat je kunt zien dat ik momenteel een scrollbalk voor mijn neus heb:

vinTage · ma 13 jan 2014

Nu kan ik wel scrollen inderdaad, maar nu is het nutteloos omdat de textarea meegroeit :P
Als je gewoon wat meer padding geven in de textarea en je kan de scroll weghalen.

nuet · ma 13 jan 2014

yep dat klopt die is idd nutteloos geworden omdat op de y een "autogrow" staat; maar dat is ook alleen maar in FF, bij chrome en IE zie ik niet eens een scrollontstaan; de y groeit mee en er komt uberhaupt geen scroll...ik had daar als eens naar gekeken en met de padding gespeeld maar dat veranderde niets; ligt dat niet aan de line-height dat ie voor FF ongunstig uitpakt? Want vlg mij is het maar iets van 5px dat je kunt scrollen

vinTage · ma 13 jan 2014

Toen ik de opmerking maakte over dat scrollen in mijn eerste reactie, kon ik helemaal niet scrollen of het textveld vergroten (in de hoogte niet iig), ik moest met die lap code dus met de pijltjestoetsen navigeren in de textarea.
Daarna heb je iets veranderd, en toen kon ik nog niet scrollen, maar dat was niet meer nodig want het groeide mee.
Nu groet het mee en kan ik scrollen, het is dus wel beter maar nog niet perfect :P

Persoonlijk zou ik het ook handiger vinden als de input gewoon te scalen is met de muis, wat nu niet gaat.

soit, het werkt allemaal wel hoor, maar zo heb je iets te doen

edit, in edit modus kan ik WEL scalen met de muis en groeit het textveld niet mee..vage shizzle :P

nuet · ma 13 jan 2014

als ik in de console kijk dan zie ik dat de textarea is: textarea#Form_Body.TextBox
Nu geef ik die in de css dit mee:


textarea#Form_Body.TextBox {
	resize: both !important;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
}

Maar naar dat resizen in y luister ie niet...
En die "element.style" in de console die ik zie die heeft de overflow: hidden bij zich maar die kan ik op geen enkele manier overschrijven...
Edit:
Aha; gevonden: probleem was de max-heigth, die blokkeerde de resize textarea in y richting. Als goe dis kun je de textarea in beide richtingen resizen nu.

vinTage · ma 13 jan 2014

Jep: thumbsup:


Mozilla:
Crome:
Opera:
IE:
Safari:

multifile image upload en thumb weergave

Reacties