photos describes real life moments in our life.peoples just take snaps and remember their loved ones in their life.due to advancement in network and social networking, It is possible to share Your real life Photos on internet via. social networking!.photo uploads are the important heart of the social networking sites.Nowadays peoples just use apps on the go,to photo and quickly share via social networking sites,where in few years back the just use upload options to upload the photo to the website just like facebook does now.usually when we go outing with your friends,those moments are shared on social network.(including your boyfriend/girlfriend) :P
why we use photo upload?
Photo becomes a important representation of someone in internet and which could feel better for the users to identify and recognize them easily.for this,photo uploader comes as handy option for instant upload of photo to database.
what ways photo uploaders are used currently?
1) profile picture of any account.(Eg.Facebook,Twitter,Dropbox,Google+,etc.)
2) online job resume submission and online form submission needs photo uploader
3) photo upload via google image search engine to find similar pictures.
4) photo upload for website to create good looking dynamic contents.
so,photo uploader plays a vital role in behind of our every photoupdates+likes in Facebook and +1's in Google :p
here lets see about instant photo uploader with dragging and resizing image for upload.
take a live demo here.
let us create indeximg.php
 |
| facebook illustrating photo sharing! |
why we use photo upload?
Photo becomes a important representation of someone in internet and which could feel better for the users to identify and recognize them easily.for this,photo uploader comes as handy option for instant upload of photo to database.
what ways photo uploaders are used currently?
1) profile picture of any account.(Eg.Facebook,Twitter,Dropbox,Google+,etc.)
2) online job resume submission and online form submission needs photo uploader
3) photo upload via google image search engine to find similar pictures.
4) photo upload for website to create good looking dynamic contents.
so,photo uploader plays a vital role in behind of our every photoupdates+likes in Facebook and +1's in Google :p
here lets see about instant photo uploader with dragging and resizing image for upload.
take a live demo here.
let us create indeximg.php
<body><div class="wrap" style="width:auto;height:auto;"><img id="uploadPreview" style="display:none;" height="auto" width="auto"/><form action="upload.php" method="post" enctype="multipart/form-data"><input id="uploadImage" type="file" accept="image/jpeg" name="image" /><input type="submit" value="Upload"> <!-- hidden inputs --><input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" /><input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" /></form></div></body>
Download javascript files for the instant uploading & dragging! here.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="./js/script.js"></script></head>
add up these codes in between head tag as style tags
use the css codes from zip!
upload.php
this is the script which process the image and submits to database or to view the success/Error Message!
<?php $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); $max_file_size = 2000 * 1024; #200kb $nw = $nh = 200; # image with # height if ($_SERVER['REQUEST_METHOD'] === 'POST') { if ( isset($_FILES['image']) ) { if (! $_FILES['image']['error'] && $_FILES['image']['size'] < $max_file_size) { $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION)); if (in_array($ext, $valid_exts)) { $path = 'uploads/' . uniqid() . '.' . $ext; $size = getimagesize($_FILES['image']['tmp_name']); $x = (int) $_POST['x']; $y = (int) $_POST['y']; $w = (int) $_POST['w'] ? $_POST['w'] : $size[0]; $h = (int) $_POST['h'] ? $_POST['h'] : $size[1]; $data = file_get_contents($_FILES['image']['tmp_name']); $vImg = imagecreatefromstring($data); $dstImg = imagecreatetruecolor($nw, $nh); imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h); imagejpeg($dstImg, $path); imagedestroy($dstImg); } else { echo 'unknown problem!'; echo 'try again using later! <a href=indeximg.php>Try again</a><div><br />'; echo '<img src="http://book.flypeach.com/App_Themes/Default/Images/error.jpg"></div>'; } } else { echo 'file is too small or large'; echo ' try again using later! <a href=indeximg.php>Try again</a> <div><br />'; echo '<img src="http://book.flypeach.com/App_Themes/Default/Images/error.jpg"> </div>'; } } else { echo 'file not set'; echo ' try again using later! <a href=indeximg.php>Try again</a><div> <br />'; echo '<img src="http://book.flypeach.com/App_Themes/Default/Images/error.jpg"></div> '; } } else { echo 'bad request!'; echo ' try again using later! <a href=indeximg.php>Try again</a><div><br />'; echo '<img src="http://book.flypeach.com/App_Themes/Default/Images/error.jpg"></div>'; } ?>
well when you select the image for uploading,it would be suddenly shown you a preview and you can choose the area to upload to the server folder!
this uploading tutorial helps the users to preview the image and upload it in better manner!
have a fun! follow for constant updates and tutorials.if u feel free comment below!
2 comments:
nice but there are still uploader better than this! this post gives clear idea ab t uploading images!
-fedrick
yeah in future u will get many post @fedrick! follow the post regularly!
Post a Comment
feel free to post your comments! Don't Spam here!