Django Ajax Изображение отправлено

Question

Я пытаюсь загрузить и сохранить файл изображения, используя Django, и отправить само изображение для использования в текущих javascript функциях.

Проблема в том, что изображение не сохраняется, request.FILES пусто.

При использовании request.body я вижу, что существует не фактический путь к файлу, а C: //fakepath.

Поскольку я хочу загруженное изображение, чтобы сохранить немедленно, я делаю сообщение, используя вызов jquery ajax, затем данные сохраняются, создавая новый объект, затем функция должна вернуть успех, что она и делает.

просмотров. py:

    def image_feedback(request):
        if request.method == 'POST':

            image = request.FILES.get('image')

            ImagesUpload.objects.create(
                image = image,
            )

            return HttpResponse('success')

models.py:

    class ImagesUpload(models.Model):
        image = models.ImageField(upload_to=renaming_file)

        def __str__(self):
            return str(self.image)

form_template. html:

<form id="image_form" enctype="multipart/form-data">{% csrf_token %}
  <button class="btn btn-secondary" onclick="$('#id_image').click()">Import Image</button>

  {{ form_image.image }}

  <input id="hidden-submit-img" value="SUBMIT" type="submit" style="visibility:hidden">
</form>

jquery ajax вызов:

<script>



    $(document).ready(function () {
      // This jquery changes the appearance of the django { form_image }
      var imgElement = $('#id_image');

      imgElement.css('visibility', 'hidden');

      // This function triggers the hidden submit,
      //  which triggers the ajax image request
      imgElement.on({
        change: function () {
          $('#hidden-submit-img').click();
        },
      });
    });


    // This jquery is for the ajax post of the image
    $('#image_form').submit(function (event) {
      event.preventDefault();
      $.ajax({
        data: {
          image: $('#id_image').val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        type: "POST",
        enctype: 'multipart/form-data',
        url: "{% url 'website:image-feedback' %}",
        success: function (data) {
          console.log(1);
          console.log(data)
        },
        error: function (data) {
          console.log(0);
        }

      });
    });

    </script>

Я думаю, что изображение не может быть сохранено, потому что javascript не проходит правильный путь, но как решить эту проблему?

РЕДАКТИРОВАТЬ:

При изменении события с .submit на .change в вызове ajax изображение сохраняется, и я вижу успешный console.log в моем браузере, НО HttpResponse («success») отображает новую пустую страницу, содержащую только слово «success».

Как я могу помешать HttpResponse сделать это? Изменение события обратно на .submit предотвращает перезагрузку страницы, но изображение не может быть сохранено

Вот мой новый вызов ajax, views.py остается неизменным:

// This jquery is for the ajax post of the image

    // Doing it with submit, the image wont get saved, but the request is "success"
    // $('#image_form').submit(function (event) {

    // Doing it with change, the image gets saved successfully, 
    // the console logs the success
    // but the respond loads a new page
    $('#image_form').change(function (event) {
      event.preventDefault();
      $.ajax({
        data: {
          image: $('#id_image').val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        enctype: 'multipart/form-data',
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function (data) {          
          console.log(1);
          console.log(data)
        },
        error: function (data) {
          console.log(0);
        }

      });
    });