Tag: image

PHP image upload

This is my image upload solution:

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
    <br>
    By clicking the Upload button you accept that you are the owner of the file.
</form>

 <?php
$target_dir = "./i/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$ext = pathinfo(basename($_FILES["fileToUpload"]["name"]), PATHINFO_EXTENSION);
$uploadOk = 1;
$FILENAME = hash_file("md5",$_FILES["fileToUpload"]["tmp_name"]).".".$ext;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        $uploadOk = 1;
    } else {
        echo "<h5>File is not an image.</h5>";
        $uploadOk = 0;
    }
	// Check if file already exists
	if (file_exists("./i/".$FILENAME)) {
	    echo "<h5>Sorry, file already exists.</h5>";
	    create_output($FILENAME);
	    $uploadOk = 0;
	}
	// Check file size
	if ($_FILES["fileToUpload"]["size"] > 5000000) {
	    echo "<h5>Sorry, your file is too large.</h5>";
	    $uploadOk = 0;
	}
	// Allow certain file formats
	if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
	&& $imageFileType != "gif" && $imageFileType != "svg" ) {
	    echo "<h5>Sorry, only JPG, JPEG, SVG PNG & GIF files are allowed.</h5>";
	    $uploadOk = 0;
	}
	// Check if $uploadOk is set to 0 by an error
	if ($uploadOk == 1){
	    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "./i/".$FILENAME)) {
		echo "<h5>The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.</h5>";
		create_output($FILENAME);
	    } else {
		echo "<h5>Sorry, there was an error uploading your file.</h5>";
	    }
	}
}else{
	echo "<br><br><br><br>Recent uploaded images:<br>";
	$files = scandir($target_dir);
	$count = 0;
	foreach($files as $result) {
		if( $result != "." && $result !=".."){
    			echo "\n<a href='http://scheinast.eu/i/$result' target='_blank'><img src='http://scheinast.eu/i/$result' style='width:304px;height:228px'></a>";
    		}
    		if($count > 10){break;}++$count;
	}

}


function create_output($FILE){
echo "<a href='http://scheinast.eu/i/$FILE'>http://scheinast.eu/i/$FILE</a>";
echo "<a href='http://scheinast.eu/i/$FILE'><img src='http://scheinast.eu/i/$FILE'></img></a>";
}

?> 
</body>
</html>

The name its stored is always an md5 hash of the file to avoid duplicate files.

Perl resize all images

This Perl-Script resize all images to the size 166×125, I used to speed up my homepage:

#!/usr/bin/perl
opendir(DIR, "./");
@files =  grep { /\.jpg$|\.gif$/io } readdir(DIR);
sleep(10);
$count=0;
for(@files){
print "".(($count*100)/$#files)."% ".$_." - ";
$cach = 'convert "./'.$_.'" -print "%wx%h" /dev/null';
$size = `$cach`;
$size =~ /^(.+)x(.+)$/o;
print " - ".$1.":".$2;
if(defined($1) && defined($2) && ($1 > 166 || $2 > 125)){
system('mogrify -resize 166x125 "./'.$_.'"');
}
++$count;
print $/;
}
closedir(DIR);

 

Image Preview with JavaScript and HTML

If you have an image and want to load a preview image or gif you could use two solution.

Html Option :

Line 2: set default image

Line 3: on mouse over load my preview gif

Line 4: on mouse out event load the default image

<img
src="default_image.jpg"
onmouseover="preview.gif"
onmouseout="default_image.jpg"  
>

JavaScript Option :

Sometimes you get something like this ‘http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg’ and you want to use it as a preview.

Line 2 and 3 are calling the JavaScript Function.

Line 4 is set by the JavaScript.

<img id="img_25" width="166" height="125" 
onmouseout="TR.stop('img_25','http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg')" 
onmouseover="TR.run('img_25','http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg')" 
src="http://www.exampl.com/image1.jpg">

Use this Call to set the Default image, the first Parameter is the ID and the second the array.

TR.dev('img_25','http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg');

This is the JavaScript Object to handle the Preview.

TR : change the image with the time-out from 400ms.

run: get the element,split the array,time-out and then change the image.

stop: time-out and then load the first image of the array.

dev:loads the default image

var res,elm;
TR = {timer : null,
chg : function (i){
i++;if(i >= res.length){i=0;}
elm.src = res[i];
this.timer = setTimeout(function (){TR.chg(i)}, 400);
},
run : function (id,images){
elm = document.getElementById(id);
res = images.split(",");
clearTimeout(this.timer);
this.chg(0);
},
stop : function (id,images){
clearTimeout(this.timer);
elm.src = res[0];
},
dev : function (id,images){
res = images.split(",");
document.getElementById(id).src=res[0];
}
};