Как я могу отправить файл с Ajax?

Question

Моя форма установлена ​​с method = post и enctype = "multipart / form-data" с регулярной отправкой информации о форме и фото, которые были обновлены, но когда я хочу использовать Ajax, все было вставлено, но не моя фотография !! Какое решение?

$("#course-frm").submit(function(event){
event.preventDefault();
var formID = 'course-frm';
var form = $("#"+formID+'-container'+" form");
const formData = new FormData(this);
$.ajax({
    url: event.target.action,
    type: event.target.method,
    data: formData,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    success: function (data) {
        if(data == 'success'){
            sweetAlertShow('عملیات ثبت با موفقیت انجام شد', 'The operation was Successful', 'success');
            form.trigger('reset');
            $("#course-frm-container").load(" #course-frm-container");
        }else if(data == 'unsuccess'){
            sweetAlertShow('امکان ثبت وجود ندارد', 'The operation was Unsuccessful', 'error');
        }
    },
    error: function(xhr){
        var data = xhr.responseJSON;
        if($.isEmptyObject(data.errors) == false) {
            $.each(data.errors, function (key, value) {
                $('#'+formID +'-'+ key)
                    .closest('.form-group')
                    .addClass('has-error')
                    .append('<span class="help-block">' + value + '</span>');
            });
        }
    }
});

});

Answer 1

Вам необходимо создать объект данных формы. В функции AJAX, установите processData в `false.

Поскольку данные, передаваемые в параметр данных как объект (технически, что угодно, кроме строки), будут обрабатываться и преобразовываться в строку запроса, в соответствии с типом содержимого по умолчанию "application / x-www-form-urlencoded ». Если вы хотите отправить DOMDocument или другие необработанные данные, установите для этого параметра значение false.

JS

  $("form").submit(function(evt){    
      evt.preventDefault(); //prevent refresh
      const formData = new FormData(this); // you need to create a FormData obj to be able to send files
   $.ajax({
       url: 'upload-my-files', //change this to your url
       type: 'POST',
       data: formData, //put formData as body data
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (data) {
         console.log(data);
       }
   });
 });

Ссылки:

https://developer.mozilla.org/en-US/docs/Web/API/FormData

http://api.jquery.com/jquery.ajax/