Friday, March 21, 2014

Load image url and choose like Google photos using php & jquery

we would be fascinated by using Google to upload photos while mean time we could grab the image by using JQuery and with some inbuilt functions in PHP.I have given a simple script to load the image from the given url and handled some Error occurings with the help of inbuilt functions.Any way You must need minimum PHP version to test this sample because the built in function i have used must have 5.3.2 version minimum as per Docs of PHP.

A final capture from my localhost to grab image from url!
have a look at my code at codepen widget!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

var url= content.match(urlRegex);

if(url.length>0)
{
   $("#flash").html('<img src="http://www.llandudnohostel.co.uk/assets/images/ajax-loader.gif">');
   $("#linkbox").slideDown('show');
   $.get("i.php?url="+url,function(data)
     {
       var expression=/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi;
       var regex = new RegExp(expression);
       var t = data;
       if (t.match(regex) )
         {
          document.getElementById("linkbox").innerHTML = ''; 
          $("#linkbox").html("<img src='"+data+"' class='img'/>"); 
         }
  else
{
$("#linkbox").html("<h3><span class=\"error\">"+data+"</span></h3>");
}
});
}
else
{  $("#flash").html('<span>Enter valid url !okay?! </span>');
}
return false;
});
});
</script>
See the Pen grab image using url by s.shivasurya (@shivasurya) on CodePen.


php code:

This php code uses get parameter url and undergoes many test to check errors and atlast prints the url which is parsed with JQuery and displayed on clients page.

<?php
if($_GET['url']) {
$shiva=$_GET['url'];
  if($info = new SplFileInfo($shiva)) {
     if($s=$info->getExtension()) {
        $allowedExts = array("gif", "jpeg", "jpg", "png");
          if(in_array($s, $allowedExts)) {
             $size=getimagesize($shiva);
               if($size && $size!=0 ) {
                  $img = $_GET['url'];
                    echo $img;
                } else{echo "size error";}
            } else{echo "existence array error";}
      }else{echo "extension error";}
   }else{echo "file error";}
}
else{echo "error";}
?>

Since i'm currently using free hosting and it is not above 5.3.2 version  :D sorry i couldn't provide however i tried in my Localhost !if u get any error just mail me or comment below.share is care. 

1 comments:

Anonymous said...

nice one @shiva

Post a Comment

feel free to post your comments! Don't Spam here!