JQuery представить форму с помощью Ajax

Question

Вот моя форма

<form name="uploadImg" id="uploadImg" class="profile-image" enctype="multipart/form-data"> 
     <input type="file" name="profile" id="updProfileImg"> 
</form> 

Вот мой JQuery событие

$("#updProfileImg:file").change(function() { 
    $('#uploadImg').submit(function() { 
    var queryString = new FormData($('form')[0]); 
    $.ajax({ 
     type: "POST", 
     url: 'index.php?route=account/edit/upload', 
     data: queryString, 
     contentType: false, 
     processData: false, 
     beforeSend: function() { 
     }, 
     success: function() { 
     } 
    }) 
}) 
}) 

Но событие изменения не вызывает форму представить, поэтому я попытался trigger('submit') но страницу обновляется, а не отправляется в ajax.

Answer 1

Вы неправильно связываете события. Поскольку у вас есть это, изменение поля вызовет привязку submit. Он должен быть так:

// bind the submit event 
$('#uploadImg').submit(function() { 
    var queryString = new FormData($('form')[0]); 
    $.ajax({ 
     type: "POST", 
     url: 'index.php?route=account/edit/upload', 
     data: queryString, 
     contentType: false, 
     processData: false, 
     beforeSend: function() { 
     }, 
     success: function() { 
     } 
    }); 
}); 

// bind the change event to trigger a submit 
$("#updProfileImg:file").change(function() { 
    $("#uploadImg").submit(); 
}); 

Answer 2

Простая модификация работает

$("#updProfileImg:file").change(function() { 
     //$('#uploadImg').submit(function() { 
      var queryString = new FormData($('#uploadImg')[0]); 
      $.ajax({ 
       type: "POST", 
       url: 'index.php?route=account/edit/upload', 
       data: queryString, 
       contentType: false, 
       processData: false, 
       beforeSend: function() { 

       }, 
       success: function() { 

       } 
      }) 
     //}) 
    }) 

Answer 3

вы должны попробовать этот код:

$("#updProfileImg:file").on("change", function(){ 
    var queryString = new FormData($('#uploadImg')[0]); 
    $.ajax({ 
     type: "POST", 
     url: 'index.php?route=account/edit/upload', 
     data: queryString, 
     contentType: false, 
     processData: false, 
     beforeSend: function() {}, 
     success: function() {} 
    }) 
}); 

, потому что я ожидал ".Кнопкой()" будет выстрелил один раз в первом изменении.