File: /var/www/html/www.winghung.com/demo_v6/example/index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Mysql Image Crop & Upload using JQuery Ajax</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
</head>
<body>
<div class="container">
<br />
<h3 align="center">PHP Mysql Image Crop & Upload using JQuery Ajax</h3>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">Select Profile Image</div>
<div class="panel-body" align="center">
<input type="file" name="upload_image" id="upload_image" accept="image/*" />
<br />
<div id="uploaded_image"></div>
</div>
</div>
</div>
<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">Upload & Crop Image</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">Crop & Upload Image</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){
$('#upload_image').on('change', function(){
var file, img, width, height;
if ((file = this.files[0])) {
img = new Image();
img.onload = function() {
//alert(this.width + " " + this.height);
width = this.width;
height = this.height;
var reader = new FileReader();
reader.onload = function (event, width, height) {
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:width,
height:height,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(file);
$('#uploadimageModal').modal('show');
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
});
$('.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>
</body>
</html>