Загрузить изображение ajax дублировать загруженные изображения, если страница не будет перезагружена

Question

У меня странная проблема с ajax частью скрипта загрузки формы, загруженной в модал. Вот пример поведения:

Загрузить изображение 1

• Все в порядке

Загрузить изображение 2

• Не в порядке. Загрузка изображений 2 и 2 (дублирование 2)

Загрузка изображений 3

• Не в порядке. Загружает изображения 3 и 3 и 3 (дубликаты изображения 3 дважды)

И так далее ...

Это HTML

<div class="col-md-6">
  <div class="form-group">
    <span class="input-group-btn">
    <span class="btn btn-info" onclick="$(this).parent().find('input[type=file]').click();" id="btn_face">Select Image</span>
    <input name="file" id="file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file"></span>
  </div>
</div>

И это скрипт

$(document).ready(function(){
 $(document).on('change', '#file', function(){
  var name = document.getElementById("file").files[0].name;
  var form_data = new FormData();
  var ext = name.split('.').pop().toLowerCase();
  if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
  {
   alert("Invalid Image File");
  }
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("file").files[0]);
  var f = document.getElementById("file").files[0];
  var fsize = f.size||f.fileSize;
  if(fsize > 2000000)
  {
      $("#upload_msg").fadeTo(2000, 500).slideUp(500, function(){
            $("#upload_msg").alert('close');
        });
      $('#upload_msg').html('<div class="alert alert-danger">Image File Size is very big. Max size 1MB</div>');

  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.ajax({
    url:"upload_image.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {
     $('#uploaded_image').html(data);
     $("#file").attr("disabled", true);
     $('#btn_face').removeClass('btn btn-info').addClass('btn btn-default');
     $('#btn_face').html('Image Uploaded');
    }
   });
  }
 });
});

Я пытался отключить кнопку загрузки после первой загрузки, которая сработала, но так как сама загрузка открывается в модальном , как только я закрываю модальное окно и открываю его снова, кнопка становится активной.

Я также пытался назначить onclick="javascript:window.location.reload()" кнопке закрытия модального окна, которая работает нормально, но если пользователь раньше который фактически отправил форму, при перезагрузке вставляет последнюю запись в MySQL db.

Я пытался найти информацию о похожем поведении, но безуспешно.

Любой помощь приветствуется.

Answer 1

Решение

Благодаря Мухаммеду Мураду Хайдеру.

Установка async:false в вызове Ajax и очистка ввода файла после успеха сделали свое дело .

Вот обновленный код

$.ajax({
    async:false,
    url:"upload_image.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {

     $("#file").val('');
     $('#uploaded_image').html(data);
     $("#file").attr("disabled", true);
     $('#btn_face').removeClass('btn btn-info').addClass('btn btn-default');
     $('#btn_face').html('Image Uploaded');
    }
   });