Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

htmlinputtypefilewhenclickedpagejumpstotop

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>&nbsp&nbsp&nbspSelect Photo&nbsp&nbsp&nbsp</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