Загрузка form-data через ajax?

Question

[maestro07]

<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>

как сделать загрузка form-data через ajax?

Answer 1

[Дмитрий]

Доброе утро.
Вот как-то так:

$(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)
                }           
            });  
        })          
    });

Comments

[maestro07]

Помогло спасибо.
Я отправляю excel чтобы с сервера получить json и полученный json отправить обратно на сервер.
Отправка json-a без form-ы. Этот код который вы дали написал кнопкой отдельно от первой (json). Как можно объединить их в одну кнопку? Не могу понять из за того что json без form, а excel c form.

[Дмитрий]

Я отправляю excel чтобы с сервера получить json и полученный json отправить обратно на сервер.

maestro07, а зачем Вы так делаете?
Про кнопки ничего не понял. У Вас одна форма и две кнопки? Или что?

[maestro07]

slo_nik, да 1 форма и две кнопки. 1 кнопка без формы загружает json. а 2-ая загружает excel. Интересует как можно было бы сделать 1 кнопку для всех. Я сделаю проверку формата если excel сделай это иначе то

[Дмитрий]

maestro07, ничего не понимаю...
Вот это id формы, а не отдельной кнопки. $('#form-data')

[maestro07]

slo_nik,

<div class="col-md-4">
                    <span class="file-input btn btn-primary btn-block btn-file">
                        Загрузить файл<input type="file" name="jsonInvoice" id="jsonInvoice"/>
                    </span>
                </div>
                <div class="col-md-4">
                    <form enctype="multipart/form-data" method='post' id="XLSX_form">
                        {% csrf_token %} 
                        {{ form }}
                        <br>
                        <input type='submit' value='Загрузить' class="btn btn-primary btn-block more">
                    </form>
                </div>

хочу сделать одну Загрузку. чтобы мог делать загрузку и excel и json. но excel делается через form а json без формы

[Дмитрий]

maestro07, извините, но кто так делает? Отдельный input без form. Это не правильно.
Поместите отдельный input между тегами form, которые у Вас ниже в коде.

[maestro07]

slo_nik повторно выбираю файл и нажимаю отправить (не обновляю страницу). Но действие не происходит и в консоле и в нетворк ничего нет. в чем причина? если обновить страницу все работает. Как можно сделать не обновляя страницу повторную отправку?

[Анастасия]

Сбор данных о файле (будет немного отличаться для нескольких файлов)

Дмитрий а как будет для двух input type="file"?

[Дмитрий]

Анастасия, отличаться будет тем, что надо всё сделать в цикле.