Загрузить файл через ajax jquery php api

Question

У меня есть код с нижеследующим форматом.

PHP файл:

<form action="http://clientwebapi.com/createEvent" id="form_createEvent" method="post" enctype="multipart/form-data"> 
<input type="text" name="image_title" /> 
<input type="file" name="media" accept="image/*,video/*"/> 
</form> 

Jquery файл:

$('#form_createEvent').submit(function() { 
    var form = $(this); 
    $.ajax({ 
     url: form.attr("action"), 
     type: form.attr("method"), 
     xhrFields: { 
      withCredentials: true 
     }, 
     data: form.serialize() 
    }).done(function() { 
     showCurrentLocation(); 
     alert('Event created successfully..'); 
     location.reload(); 

    }).fail(function() { 
     alert("fail!"); 
    }); 
    event.preventDefault(); 
}); 

выше Jquery кода представления. Кроме того, пока я представляю ниже формат, он будет перенаправлен на «http://clientwebapi.com/createEvent» и событие успешно создано.

Form Submit и перенаправление на страницу клиента:

$('#form_createEvent').submit(function() { 
    var fd = new FormData(); 
    fd.append('media', input.files[0]); 

    $.ajax({ 
     url: form.attr("action"), 
     data: fd, 
     processData: false, 
     contentType: false, 
     type: form.attr("method"), 
     success: function (data) { 
      alert(data); 
     } 
    }); 
event.preventDefault(); 

}); 

здесь Как я могу предотвратить во время отправки формы и создать событие с данным изображением. Пожалуйста, помогите

Answer 1

Я нашел ответ на этот , Я здесь ошибся. Я решил, используя код ниже ..

$('#form_createEvent').submit(function() { 
      var form = new FormData($(this)[0]); 
      $.ajax({ 
       url: 'http://clientwebapi.com/createEvent/', 
       type: 'POST', 
       xhrFields: { 
        withCredentials: true 
       }, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       data: form, 
       beforeSend: function() { 
        $("#output_process").html("Uploading, please wait...."); 
       }, 
       success: function() { 
        $("#output_process").html("Upload success."); 
       }, 
       complete: function() { 
        $("#output_process").html("upload complete."); 
       }, 
       error: function() { 
        //alert("ERROR in upload"); 
        location.reload(); 
       } 
      }).done(function() { 
       alert('Event created successfully..'); 

      }).fail(function() { 
       alert("fail!"); 
      }); 
      event.preventDefault(); 
     }); 

Answer 2

Вы забыли добавить событие в качестве аргумента представить функцию:

$('#form_createEvent').submit(function (event) { 

Answer 3

вы можете остановить отправку формы по return false;

$('#form_createEvent').submit(function() { 
    // some code 
    $.ajax({ 
     // some code/objects 
    }); 

    return false; // here, it will stop the form to be post to the url/action 

});