0

I want to change the image that I chose from the file upload option. The image that I choose should change over the image that is predetermined. How do I do this with ajax as to not have to reload the page? 

$(document).ready(function() {

  $('.image-upload-btn').on('click', function() {
    var input = document.createElement('INPUT');
    input.type = 'file';
    input.style.display = 'none'
    $('html body').append(input);
    input.click();
    input.onchange = function() {
      $('.image-upload-btn').css('background-image', 'url(http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png)');
    }
  });

});
.image-upload-btn {
  background-image: url('http://bread.pp.ua/n/settings_g.svg');
  background-position: center;
  background-size: cover;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class='image-upload-btn'></div>
learningbyexample
  • 1,459
  • 1
  • 13
  • 37
  • i copied the code in jsfiddle https://jsfiddle.net/hf5uum5k/ i think it is working as expected – Haider Jul 18 '16 at 18:08
  • @Haider I want to change the image to the newly chosen one. Not the camara that comes out right there. If I chose a image from the file upload option I want to be able to see that image as a preview rather than the camara image. – learningbyexample Jul 18 '16 at 19:02
  • then http://stackoverflow.com/questions/17138244/how-to-display-selected-image-without-sending-data-to-server and http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded will help you – Haider Jul 19 '16 at 18:47

0 Answers0