Loading form-data via ajax?

Question

JavaScript

<form enctype="multipart/form-data" method='post' action="{% url 'documents:import_xlsx_api' %}" id="XLSX_form">
    {% csrf_token %} 
    {{ form }}
    <br>
    <input type='submit' value='Загрузить' class="btn btn-primary btn-block more">
</form>

how to make form-data loading via ajax?

Answer 1

Good morning.
Something like that:

$(function() {
        $('#form-data').on('submit', function(e){
            e.preventDefault()
            var form = $(this); // Предположу, что этот код выполняется в обработчике события 'submit' формы
            var data = new FormData();  // Для отправки файлов понадобится объект FormData. Подробнее про него можно прочитать в документации - https://developer.mozilla.org/en-US/docs/Web/API/FormData



            // Сбор данных из обычных полей
            form.find(':input[name]').not('[type="file"]').each(function() { 
                var field = $(this);
                data.append(field.attr('name'), field.val());
            });



            // Сбор данных о файле (будет немного отличаться для нескольких файлов)
            var filesField = form.find('input[type="file"]');
            var fileName = filesField.attr('name');
            var file = filesField.prop('files')[0];
            data.append(fileName, file) ;



            // Отправка данных
            var url = 'upload.php';

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                contentType: false,
                cache: false, 
                processData:false, 
                success: function(response) {
                    console.log(response)
                }           
            });  
        })          
    });