JQuery – PHP (Trim) Crop and Upload Script

tarihinde gönderilmiş tarafından

PHP ve JQUERY ile tasarladığınız form sayfanızda en sorunsuz şekilde kullanıcı dostu resim yükleme işlemi gerçekleştirmek için kolay bir method bulunuyor.

jquery-image-upload

Dosya seç tıklıyoruz ve resmimizi seçtikten sonra karşımıza aşağıdaki gibi bir popup geliyor , popup üzerinden istediğimiz alana TRİM uyguladıktan sonra yükle dediğimiz anda aşşağıda kodlarını paylaştığım PHP dosyasına resmi göndererek upload işlemi gerçekleşmiş oluyor.

Resim yükleme esnasında veya trim sonrasında herhangi bir sayfa yenileme işlemi olmadığı için sayfamızda form değerlerinde sıfırlama yada post get ile gelinmiş bir sayfa ise yeniden çalışma gibi bir durum oluşmuyor. Diğer bir avantajı resim dosyası ile birlikte diğer form bilgileri aynı anda gitmeyeceği için büyük boyutlu resim dosyalarında yüklenmeme gibi bir durum oluşursa tüm form yeniden doldurulmak zorunda kalmayacaktır.

 

jquery-trim-and-upload

 

Script HTML içeriği

 

<html>  
    <head>  
        <title>Resim Crop ve PHP upload işlemi</title>  
		
	
		< script src="jquery.min.js"></script>  
		< script src="bootstrap.min.js"></script>
		< script src="croppie.js"></script>
		<link rel="stylesheet" href="bootstrap.min.css" />
		<link rel="stylesheet" href="croppie.css" />
		
    </head>  
    <body>  
        <div class="container">
          <br />
      <h3 align="center">Resim boyutlandırma ve JQuery kullanarak PHP ile upload işlemi</h3>
      <br />
      <br />
			<div class="panel panel-default">
  				<div class="panel-heading">Resimi Seçiniz</div>
  				<div class="panel-body" align="center">
  					<input type="file" name="upload_image" id="upload_image" />
  					<br />
  					<div id="uploaded_image"></div>
  				</div>
  			</div>
  		</div>
    </body>  
</html>

<div id="uploadimageModal" class="modal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
      		<div class="modal-header">
        		<button type="button" class="close" data-dismiss="modal">×</button>
        		<h4 class="modal-title">Boyutlandır ve yükle</h4>
      		</div>
      		<div class="modal-body">
        		<div class="row">
  					<div class="col-md-8 text-center">
						  <div id="image_demo" style="width:350px; margin-top:30px"></div>
  					</div>
  					<div class="col-md-4" style="padding-top:30px;">
  						<br />
  						<br />
  						<br/>
						  <button class="btn btn-success crop_image">Boyutlandır yükle</button>
					</div>
				</div>
      		</div>
    	</div>
    </div>
</div>

Script JS İçeriği

 
$(document).ready(function(){

	$image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'square' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

});

 

Script PHP içeriği

if(isset($_POST["image"]))
{
	$data = $_POST["image"];


	$image_array_1 = explode(";", $data);


	$image_array_2 = explode(",", $image_array_1[1]);


	$data = base64_decode($image_array_2[1]);

	$imageName = time() . '.png';

	file_put_contents($imageName, $data);

	echo '<img src="'.$imageName.'" class="img-thumbnail" />';

}

 

Projede kullanılan dosyalar indirmek için . ; LINK