Image Crop And Upload Using Jquery With Php Ajax

HTML FILE CONTENT

::baslangic::html lang="en"::bitis::
::baslangic::head::bitis::
  ::baslangic::title::bitis::PHP - jquery ajax crop image before upload using croppie plugins::baslangic::/title::bitis::
  ::baslangic::script src="http://demo.itsolutionstuff.com/plugin/jquery.js"::bitis::::baslangic::/script::bitis::
  ::baslangic::script src="http://demo.itsolutionstuff.com/plugin/croppie.js"::bitis::::baslangic::/script::bitis::
  ::baslangic::link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css"::bitis::
  ::baslangic::link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css"::bitis::
::baslangic::/head::bitis::
::baslangic::body::bitis::
::baslangic::div class="container"::bitis::
	::baslangic::div class="panel panel-default"::bitis::
	  ::baslangic::div class="panel-heading"::bitis::Image Upluad::baslangic::/div::bitis::
	  ::baslangic::div class="panel-body"::bitis::
	  	::baslangic::div class="row"::bitis::
	  		::baslangic::div class="col-md-4 text-center"::bitis::
				::baslangic::div id="upload-demo" style="width:350px"::bitis::::baslangic::/div::bitis::
	  		::baslangic::/div::bitis::
	  		::baslangic::div class="col-md-4" style="padding-top:30px;"::bitis::
				::baslangic::strong::bitis::Select Image:::baslangic::/strong::bitis::
				::baslangic::br/::bitis::
				::baslangic::input type="file" id="upload"::bitis::
				::baslangic::br/::bitis::
				::baslangic::button class="btn btn-success upload-result"::bitis::Upload Image::baslangic::/button::bitis::
	  		::baslangic::/div::bitis::
	  		::baslangic::div class="col-md-4" style=""::bitis::
				::baslangic::div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"::bitis::::baslangic::/div::bitis::
	  		::baslangic::/div::bitis::
	  	::baslangic::/div::bitis::
	  ::baslangic::/div::bitis::
	::baslangic::/div::bitis::
::baslangic::/div::bitis::
::baslangic::script type="text/javascript"::bitis::
$uploadCrop = $(#upload-demo).croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: circle
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$(#upload).on(change, function () { 
	var reader = new FileReader();
    reader.onload = function (e) {
    	$uploadCrop.croppie(bind, {
    		url: e.target.result
    	}).then(function(){
    		console.log(jQuery bind complete);
    	});
    	
    }
    reader.readAsDataURL(this.files[0]);
});
$(.upload-result).on(click, function (ev) {
	$uploadCrop.croppie(result, {
		type: canvas,
		size: viewport
	}).then(function (resp) {


		$.ajax({
			url: "/ajax.php",
			type: "POST",
			data: {"image":resp},
			success: function (data) {
				html = ::baslangic::img src=" + resp + " /::bitis::;
				$("#upload-demo-i").html(html);
			}
		});

	});
});
::baslangic::/script::bitis::
::baslangic::/body::bitis::
::baslangic::/html::bitis::

AJAX.PHP FILE CONTENT :

::baslangic::?phP
$data = $_POST[image];
list($type, $data) = explode(;, $data);
list(, $data)      = explode(,, $data);
$data = base64_decode($data);
$imageName = time()..png;
file_put_contents(upload/.$imageName, $data);
echo done;
?::bitis::