How to create a php image uploader with file system in which i could preview the thumb of image before uploading it to server and also validate the file before uploading.
I am using following code for image manipulation and saving.
HTML code:
<form id="imageform" enctype="multipart/form-data" method="post" action='upload.php'>
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" />
</div>
PHP Code:
<?php
// include ImageManipulator class
require_once('ImageManipulator.php');
if ($_FILES['fileToUpload']['error'] > 0) {
echo "Error: " . $_FILES['fileToUpload']['error'] . "<br />";
} else {
// array of valid extensions
$validExtensions = array('.jpg', '.jpeg', '.gif', '.png');
// get extension of the uploaded file
$fileExtension = strrchr($_FILES['fileToUpload']['name'], ".");
// check if file Extension is on the list of allowed ones
if (in_array($fileExtension, $validExtensions)) {
$newNamePrefix = 'Thumb' . '_';
$newNamePrefix1 = 'Highdef' . '_';
$manipulator = new ImageManipulator($_FILES['fileToUpload']['tmp_name']);
$manipulator1 = new ImageManipulator($_FILES['fileToUpload']['tmp_name']);
// resizing to 200x200
$newImage = $manipulator->resample(200, 200);
$newImage1 = $manipulator1->resample(1024, 768);
// saving file to uploads folder
$manipulator->save('uploads/thumbs/' . $newNamePrefix . $_FILES['fileToUpload'] ['name']);
$manipulator1->save('uploads/highDef/' . $newNamePrefix1 . $_FILES['fileToUpload']['name']);
echo 'Done ...';
$folder = 'uploads/thumbs/';
$filetype = '*.*';
$files = glob($folder . $filetype);
$count = count($files);
echo '<table>';
for ($i = 0; $i < $count; $i++) {
echo '<tr><td>';
echo '<a name="' . $i . '" href="#' . $i . '"><img src="' . $files[$i] . '" /></a>';
echo substr($files[$i], strlen($folder), strpos($files[$i], '.') - strlen($folder));
echo '</td></tr>';
}
echo '</table>';
} else {
echo 'You must upload an image...';
}
}
?>
