Сохранение формы с изображениями без перезагрузки страницы, ajax

@m0nte-cr1st0 · Регистрация: 15.01.2019

Студворк — интернет-сервис помощи студентам

Python
1
2
3
4
5
6
7
8
9
10
class IdentificationForm(forms.ModelForm):
    class Meta:
        model = RequestUser
        fields = ('main_photo', 'profile_photo', )
 
    def clean_image(self):
        ....
 
    def clean_image2(self):
        ....

HTML5
1
2
3
4
5
6
<form action="" class="edit_form new_event" enctype="multipart/form-data" method="POST">
  {% csrf_token %}
  {{ form.main_photo }}
  {{ form.profile_photo }}
  <button class="submit mgln" type='button'>Послать запрос</button>
</form>

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
def identification_view(request):
    if request.method == 'POST':
        form = IdentificationForm(request.POST, request.FILES)
        if form.is_valid():
            print('ok')
            req_user = form.save(commit=False)
            req_user.user = request.user
            req_user.save()
            return HttpResponse('image upload success')
    else:
        form = IdentificationForm()
    identifications  = RequestUser.objects.filter(user = request.user)
 
    return render(request, 'accounts/identification.html', {'form': form, 'identifications': identifications})

Всё работает, но вот после создания объекта происходит редирект. Это как-то не очень красиво смотрится.
Нужно, чтобы после создания объекта высвечивалось хоть какое-то уведомление, что объект создан, пусть даже простой алерт.

Вот, как я пробовал сделать.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
$('.mgln').on('click', function(){
  main_photo = $('input[name=main_photo]').val();
  profile_photo = $('input[name=profile_photo]').val();
//  console.log(main_photo)
  
  data = {
              main_photo: main_photo,
              profile_photo: profile_photo,
              csrfmiddlewaretoken: '{{ csrf_token }}'
            }
 
  console.log(data)
  $.ajax({
    type: "POST",
    url: "{% url 'identification_view' %}",
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(result) {
      alert('Ожидайте. Ваши документы приняты в обработку.');
    },
    error: function(result) {
      alert('Произошла ошибка. Попробуйте позже.');
    }
  })
})
</script>

Вылетает с 403 ошибкой - csrf token. Пытался нагуглить - нашёл различные решения, не помогло. Можно, в принципе, на GET запрос переделать... Но не хотелось бы. Может, кто сталкивался с таким?

Добавлено через 3 минуты
Отрисовывается следующий шаблон.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="" class="edit_form new_event" enctype="multipart/form-data" method="POST">
          <input type="hidden" name="csrfmiddlewaretoken" value="i1zMpWDhHR5MSXALBi4WA8nNZIuQIlX1236DgnVQHAByJfIHcVsI1nSRuXRgu1AX9oo">
            <div class="field inline">
                <div class="subhead">Фото главной страницы паспорта:</div>
                <input type="file" name="main_photo" required="" id="id_main_photo">
                <label for="foto1" class="id_foto">
                    <div class="addPhoto">
                        <div class="button"></div>
                    </div>
                </label>
            </div>
            <div class="field inline">
                <div class="subhead">Фото в профиль с раскрытым паспортом в руке:</div>
                <input type="file" name="profile_photo" required="" id="id_profile_photo">
                <label for="foto2" class="id_foto">
                    <div class="addPhoto">
                        <div class="button"></div>
                    </div>
                </label>
            </div>
            <div class="center">
              <button class="submit mgln" type="button">Послать запрос</button>
            </div>
        </form>

Также возникает проблема с тем, что появляется какой-то фейк путь файла... Тоже искал в интернете, подобных проблем много. Не удалось решить(

Вроде бы, эти 2 проблемы распространённые, и решения есть, но что-то мне никак не удаётся(

Добавлено через 31 минуту
Попытка решить через GET убрала проблему с токеном. Хотя всё же правильней было бы через POST, наверное.

Python
1
2
3
4
5
6
7
8
9
10
def identification_view(request):
    if request.method == 'GET':
        form = IdentificationForm()
        if request.is_ajax():
            main_photo = request.GET.get('main_photo')             #C:\fakepath\<имя_файла1>
            print(main_photo)
            profile_photo = request.GET.get('profile_photo')         #C:\fakepath\<имя_файла2>
            print(profile_photo)
 
    return render(request, 'accounts/identification.html', {'form': form})

Нужно как-то устранить проблему с fakepath(

@netBool · 28.03.2019, 10:41

Сообщение от m0nte-cr1st0

Хотя всё же правильней было бы через POST, наверное

А в csrfmiddlewaretoken: '{{ csrf_token }}' верный csrf_token записывается? Не уловил, откуда вы его берете...

Я обычно делаю, как в документации рекомендуется получать csrf на js из куки (пример с оф док):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
    var csrftoken = getCookie('csrftoken');
}

Сообщение от m0nte-cr1st0

Также возникает проблема с тем, что появляется какой-то фейк путь файла...

Это проблема не в джанго. На со есть решение, в таком виде:

JavaScript
1
2
3
4
5
6
7
8
9
var fd = new FormData($('#fbndoc').get(0));
fd.append("CustomField", "This is some extra data");//add all you data here like this
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

Если в кратце, то рекомендуется использовать FormData для передачи изображений через AJAX

@m0nte-cr1st0 · 28.03.2019, 12:48 **[ТС]**

netBool, спасибо, пробовал и через FormData
решил пока через GET делать, чтобы с токеном этим не возиться ещё. Потом на POST буду переделывать.
Вот, что получается

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
  $('.mgln').on('click', function(){
    var form = $('form').get(0);
    var main_photo = new FormData(form);
    main_photo.append('file1', $('input[name=main_photo]'))
    console.log(main_photo)
  data = {
      main_photo: main_photo,
    }
 
    console.log(data)
    $.ajax({
      type: "GET",
      url: "{% url 'identification_view' %}",
      data: data,
      cache: false,
      processData: false,
      contentType: false,
      success: function(result) {
        alert('Ожидайте. Ваши документы приняты в обработку.');
      },
      error: function(result) {
        alert('Произошла ошибка. Попробуйте позже.');
      }
    })
  })
</script>

Аякс успешно уходит и приходит. В консоле выводится пустая, вроде бы FormData, с наборами свойств.

Сохранение формы с изображениями без перезагрузки страницы, ajax

Но во views прилетает None, по сути.
Вот, что выдают запросы FILES и GET соответственно

Code
1
2
<MultiValueDict: {}>
<QueryDict: {u'[object Object]': [u''], u'_': [u'1553766039811']}>

@netBool · 28.03.2019, 13:10

Сообщение от m0nte-cr1st0

netBool, спасибо, пробовал и через FormData
решил пока через GET делать, чтобы с токеном этим не возиться ещё. Потом на POST буду переделывать.

Забыл добавить: FormData создана для работы через POST.

Да и стандарт вряд ли предусматривает передачу файлов в get-запросах

@m0nte-cr1st0 · 28.03.2019, 13:27 **[ТС]**

netBool, позже попробую, отпишу

@m0nte-cr1st0 · 31.03.2019, 19:36 **[ТС]**

Сообщение от netBool

А в csrfmiddlewaretoken: '{{ csrf_token }}' верный csrf_token записывается?

как понять, верный ли csrf_token?
Если смотреть в форме хтмл {{csrf_token}} - там один, в js (по этой функции) - другой.
Пробую через POST. Как в доках делаю, вроде, но не получается(
https://developer.mozilla.org/... ata/append

@netBool · 31.03.2019, 21:39

Сообщение от m0nte-cr1st0

Если смотреть в форме хтмл {{csrf_token}} - там один, в js (по этой функции) - другой.

Да, он и не должен совпадать, хотя в документации не указано это явно. Но:

The CSRF token is also present in the DOM, but only if explicitly included using csrf_token in a template. The cookie contains the canonical token; the CsrfViewMiddleware will prefer the cookie to the token in the DOM. Regardless, you’re guaranteed to have the cookie if the token is present in the DOM, so you should use the cookie!

- косвенно указывает на то, что они могут быть разными. И исходя из этой цитаты, CSRF, взятый из куки, предпочтительней / имеет больший приоритет / нежели взятый из DOM.

Что касается моего опыта, то для ajax всегда беру его из cookie.

Сообщение от m0nte-cr1st0

как понять, верный ли csrf_token?

Если csrf_token будет неверный, то сервер выдаст ошибку - что-то типа

CSRF token missing or incorrect.

@m0nte-cr1st0 · 01.04.2019, 12:30 **[ТС]**

Вот как получилось, кстати. Без функции получения токена, кстати.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var token = '{{csrf_token}}';
$('.mgln').on('click', function(){
    formData = new FormData();
    formData.append('file1', $('input[name=main_photo]')[0].files[0])
    formData.append('file2', $('input[name=profile_photo]')[0].files[0])
    $.ajax({
      headers: { "X-CSRFToken": token },
      type: "POST",
      url: "{% url 'identification_view' %}",
      data: formData,
      processData: false,
      contentType: false,
      success: function(result) {
        alert('Ожидайте. Ваши документы приняты в обработку.');
      },
      error: function(result) {
        alert('Произошла ошибка. Попробуйте позже.');
      }
    })
  })

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
def identification_view(request):
    if request.method == 'POST':
        form = IdentificationForm(request.POST, request.FILES)
        if request.is_ajax():
            print(dir(request.FILES))
            main_photo = request.FILES.get('file1')
            profile_photo = request.FILES.get('file2')
            RequestUser.objects.create(
            user = request.user,
            main_photo = main_photo,
            profile_photo = profile_photo
            )
            return HttpResponse('image upload success')
    else:
        form = IdentificationForm()
    identifications  = RequestUser.objects.filter(user = request.user)
 
    return render(request, 'accounts/identification.html', {'form': form, 'identifications': identifications})

@netBool · 04.04.2019, 09:23

Сообщение от m0nte-cr1st0

Вот как получилось, кстати. Без функции получения токена, кстати.

Неплохо получилось

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	28.03.2019, 13:27 [ТС]
	netBool, позже попробую, отпишу 0

Сохранение формы с изображениями без перезагрузки страницы, ajax

Решение