Thursday, 8 March 2018

Upload Image from URL using PHP with Ajax

           , , , , , , ,      3 comments   

In this post we have make Simple PHP script with Ajax for Upload an Image File from Entered URL. That means how to upload image from Remote url to our server or website by using PHP script with Ajax. So when we have enter url which end with any image name with extension, so if any image found at the end of url then that image will be uploaded to our website from remote location by using PHP script. Here we have use Ajax so this all process has been done without refresh of web page.

This is very simple but if you want to learn how we can upload any image file from remote location to our web server then at that time this script will helpful. And if you want to give feature like add image from url to your user of web application then at that time also this script will helpful. User can just enter his image url in textbox and click on image. Then image will be uploaded to folder without selecting image from their local computer. So, this is also one feature which increase usability of your web application.

For make this type of script we have use two technology like Ajax and PHP. Ajax for front end and PHP script for back end. All client side validation has been done by using Jquery and if validation pass then it will send request to PHP server side script by using Ajax. In PHP script for check url is valid or not, we have use filter_var() function. If url is proper then by using file_get_contents() function reads a image file into a string. And lastly by using file_get_contents() function, we have write image string to a file. So this way we have upload image from URL by using PHP with Ajax.








Source Code


index.php



<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>PHP upload an image file through url</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <style>
  .box
  {
   width:600px;
   margin:0 auto;
  }
  </style>
 </head>
 <body>
 <br />
  <div class="container box">
   <br />
   <br />
   <br />
   <h2 align="center">PHP upload an image file through url</h2><br />
   <div class="form-group">
    <label>Enter Image Url</label>
    <input type="text" name="image_url" id="image_url" class="form-control" />
   </div>
   <div class="form-group">
    <input type="button" name="upload" id="upload" value="Upload" class="btn btn-info" />
   </div>
   <br />
   <div id="result"><img src="upload/upload-image-from-url-using-php-with-ajax.png" class="img-thumbnail img-responsive" /></div>
  </div>
  <div style="clear:both"></div>
  <br />
  
  <br />
  <br />
  <br />
 </body>
</html>


<script>
$(document).ready(function(){
 $('#upload').click(function(){
  var image_url = $('#image_url').val();
  if(image_url == '')
  {
   alert("Please enter image url");
   return false;
  }
  else
  {
   $('#upload').attr("disabled", "disabled");
   $.ajax({
    url:"upload.php",
    method:"POST",
    data:{image_url:image_url},
    dataType:"JSON",
    beforeSend:function(){
     $('#upload').val("Processing...");
    },
    success:function(data)
    {
     $('#image_url').val('');
     $('#upload').val('Upload');
     $('#upload').attr("disabled", false);
     $('#result').html(data.image);
     alert(data.message);
    }
   })
  }
 });
});
</script>








upload.php



<?php
//upload.php

if(isset($_POST["image_url"]))
{
 $message = '';
 $image = '';
 if(filter_var($_POST["image_url"], FILTER_VALIDATE_URL))
 {
  $allowed_extension = array("jpg", "png", "jpeg", "gif");
  $url_array = explode("/", $_POST["image_url"]);
  $image_name = end($url_array);
  $image_array = explode(".", $image_name);
  $extension = end($image_array);
  if(in_array($extension, $allowed_extension))
  {
   $image_data = file_get_contents($_POST["image_url"]);
   $new_image_path = "upload/" . rand() . "." . $extension;
   file_put_contents($new_image_path, $image_data);
   $message = 'Image Uploaded';
   $image = '<img src="'.$new_image_path.'" class="img-responsive img-thumbnail"  />';
  }
  else
  {
   $message = "Image not found";
  }
 }
 else
 {
  $message = 'Invalid Url';
 }
 $output = array(
  'message' => $message,
  'image'  => $image
 );
 echo json_encode($output);
}


?>

3 comments: