Croppie не корректно работает

Здравствуйте, помогите разобраться в коде. На сайт установила croppiе для аватарки. Раньше пост с изображением отправлялся вместе с контактными данными( имя, фамилия, изображение и т.д), теперь мне нужно было отправку поста с изображением разъединить и отправлять отдельно. прописала и самое интересное: отправляю пост с изображением, в консоли вижу, что отправился пустой пост, без перезагрузки страницы снова выбираю изображение другое и снова отправляю пост, вижу в консоли что адрес изображения отправился и внимание, при перезагрузке страницы он мне выдает изображение, которое было отправлено первым! А если отправить пост один раз и перезагрузить, в ответ ничего не выводит. прилагаю кусок кода, может кто разберется

 <form method="POST" id="avatar"  action="javascript:void(null);"  onsubmit="call_avatar()" >

            <div class="holder" >
                <img id="new-resp-img" name="new-resp-img" src="" alt="" >
                <input type="hidden" id="imagg" name="imagg" value="">
                <div class="block_ava"> 
              <div class="myButton" onclick="show('block')"> &#8679; Изменить фотографию 
              </div>
              <div class="deleted"> &#10006; Удалить фотографию 
              </div>
                   </div>
            </div>   

      <!-- Задний прозрачный фон-->
            <div onclick="show('none')" id="wrap"></div>
                        <!-- Само окно-->
                <div id="window">
                    <div class="button_ava">
                            <label class="img-upload-label">
                                ВЫБРАТЬ ФАЙЛ
                                <input type="file" id="upload" class="img-upload" accept="image/jpeg,image/png,image/gif">
                            </label>
                        <div id="uploaded-img"></div>
                        <input type="submit" class="set_ava" value="СОХРАНИТЬ">
                        <!--<input type="button" class="close_ava" onclick="show('none')" value="ОТМЕНИТЬ">-->
                    </div>
                </div>
                      </form>

    <script>
         function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imgInp").change(function(){
            readURL(this);
        });
         $(document).ready(function() {
             var $uploadCrop;
             function readFile(input) {
                 if (input.files && input.files[0]) {
                     var reader = new FileReader();
                     reader.onload = function (e) {
                         $uploadCrop.croppie('bind', {
                             url: e.target.result
                         }).then(function(){
                         });
                     }
                     reader.readAsDataURL(input.files[0]);
                 }
             }
             $('#upload').on('change', function () { readFile(this); });
             $('.set_ava').on('click', function (ev) {
                 $uploadCrop.croppie('result', {
                     type: 'canvas',
                     size: 'viewport'
                 }).then(function (resp) {
                     $('#new-resp-img').attr('src', resp);
                     $('#imagg').attr('value', resp);
                     show('none');
                 });
             });
             $uploadCrop = $('#uploaded-img').croppie({
                 enableExif: true,
                 viewport: {
                     width: 200,
                     height: 200
                 },
                 boundary: {
                     width: 300,
                     height: 300
                 }
             });
         })

        </script>