I guess this is a variation of the problem where the webpage jumps to the top after a button is clicked. But this is the button associated with html element tag input type='file'
And I'm just finishing polishing up 'croppie' and this is the only issue I have left. I've read everything I can find but most are about anchors. Any idea how I can stop the webpage from jumping back to the top once the 'browse' button for the input type='file' is clicked?
html:
<div class="container">
<div class="panel panel-default">
<div class="panel-body" align="center">
<label class="sltPhoto">
<input type="file" name="upload_image" id="upload_image"
accepts = 'image/pjpeg, image/jpeg,
image/gif, image/tiff, image/png'>
<span>   Select Photo   </span>
</label>
<div id="uploaded_image"></div>
</div>
</div>
</div>
jquery:
<script>
var image_crop;
$(document).ready(function(){
image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:225,
height:300,
type:'square' //circle
},
boundary:{
width:700,
height:400
}
});
$('#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){
var file_input = $('#upload_image').val();
var cpt_input = $.trim($("#ugupcpt").val());
$.ajax({
url:"upldpix.php",
type: "POST",
data:{"image": response, "file": file_input, "caption": cpt_input},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
});
</script>
On Edit: I added my code. Sorry I didn't do that in the first place.
Comments
Post a Comment