Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP – Hai ketemu lagi dengan saya dan pada postingan kali ini saya akan mempostin tentang cara upload gambar melalui url atau online menggunakan ajax dan PHP. Setelah sebelumnya kita sudah membahas tentang cara upload file menggunakan Ajax namun kita menguploadnya melalui form dengan input file sedangkan kali ini kita tidak menggunakan itu yang kita butuhkan hanya url gambarnya. Caranya sangat mudah yaitu kita mengambil gambarnya terlebih dahulu, setalah kita sudah mendapatkan gambarnya selanjutnya kita mengupload pada direktori lokal kita.

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP

Cara Membuat Upload dan Ekstrak Zip pada PHP

Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal

Cara membuatnya sangat mudah yaitu sebagai berikut

1. Pertama tentunya karena kita menggunakan Ajax jadi kita memerlukan jquery. Untuk keperluan demo jadi saya menggunakan jquery online jika untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau download pada akhir project ini

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Buat file index.php dan buat formnya seperti dibawah

<div class="container mb-3">
	<h3 align="center" class="mb-3 mt-3">Dewan Upload Image From URL</h3>
	<div class="form-group">
		<label>Enter Image Url</label>
		<input type="url" name="image_url" id="image_url" class="form-control" required/>
	</div>
	<div class="form-group">
		<input type="button" name="upload" id="upload" value="Upload" class="btn btn-info" />
	</div>
	
	<div id="result">
		<img src="no_image.png" class="img-thumbnail img-responsive" />
	</div>
</div>

3. Kemudian pada tag <body> paling bawah kita tambahkan script dibawah ini

<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>

Penjelasan

Script diatas merupakan script untuk mengirimkan ajax ke file upload.php oleh karena itu kita perlu membuat file upload.php. Pada script dibawah ini lah yang merupakan scrupt ajaxnya

$.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);
}
})

4. Buat file upload.php dan isikan dengan script dibawah ini

<?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)){
        $tempdir = "upload/";
        if (!file_exists($tempdir))
          mkdir($tempdir);
          $image_data = file_get_contents($_POST["image_url"]);
          $new_image_path = $tempdir . 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);
  }
?>

Penjelasan :

Untuk mengambil gambar kita menggunakan perintah dibawah

$image_data = file_get_contents($_POST["image_url"]);

Sedangkan untuk menyimpan data kita menggunakan perintah ini

file_put_contents($new_image_path, $image_data);

5. Kemudian jalankan project sobat dan nanti akan terlihat seperti gambar dibawah

Dan jika sudah mengisi url dan klik upload maka akan jadi seperti gmbar dibawah

Dan jika berhasil maka pada folder project sobat akan muncul folder upload dan akan terdapat filenya dengan nama file acak seperti gambar dibawah

Sekian postingan saya tentang Cara Upload Gambar dari URL Menggunakan Ajax dan PHP. Masih banyak artikel yang bisa dibahas tentang upload file/foto/gambar. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi postingan saya lainnya untuk menambah ilmu sobat.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..