如何修复从Django的引导模态形式上传图像 [英] How fix to upload image from bootstrap modal form in django

问题描述

我找不到有关如何通过Django模态形式加载图像的信息.如何通过Django模式表格上传文件?

I can not find the information how to load image through django modal form. How to upload a file through a django modal form?

我的文件models.py

my file models.py

class Meal(models.Model):
    restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
    name = models.CharField(max_length=500)
    short_description = models.CharField(max_length=500)
    image = models.ImageField(upload_to='meal_images/', blank=False)
    price = models.IntegerField(default=0)

    def __str__(self):
        return self.name

我的文件form.py

my file form.py

class MealForm(forms.ModelForm):
    class Meta:
        model = Meal
        exclude = ("restaurant",)

需要添加哪些内容到views.py以处理图像加载views.py

What needs to be added to views.py to process image loading views.py

def restaurant_add_meal(request):
    data = dict()
    if request.method == "POST":
        form = MealForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            meals = Meal.objects.all()
            data['meal_list'] = render_to_string('meal_list.html',{'meals':meals})
        else:
            data['form_is_valid'] = False
    else:
        form = MealForm()
    context = {
    'form': form
    }
    data['html_form'] = render_to_string('restaurant/add_meal.html', context, request=request)
    return JsonResponse(data)

表格形式add_meal.html

Modal form add_meal.html

{% load crispy_forms_tags %}

<form method="POST" data-url="{% url 'restaurant-add-meal' %}" class="create-form" enctype="multipart/form-data">
    {% csrf_token %}
        <div class="modal-header bg-blue">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" class="text-white">&times;</span>
            </button>
        <h4 class="modal-title text-center text-white" >Add Meal</h4>
        </div>
        <div class="modal-body">
        {{form|crispy}}
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-pink">Add Meal</button>
        </div>
</form>

处理表单的ajax代码.我不明白这里缺少什么.

ajax code that handles the form. I can not understand what is missing here.

plugin.js

plugin.js

$(document).ready(function(){
    $('.show-form').click(function(){
        $.ajax({
            url: '/restaurant/meal/add',
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-meal').modal('show');
            },
            success: function(data){
                $('#modal-meal .modal-content').html(data.html_form);
            }
        })
    })
    $('#modal-meal').on('submit','.create-form' , function(){
        var form = $(this);
        $.ajax({
            url: form.attr('data-url'),
            data: form.serialize(),
            type: form.attr('method'),
            dataType: 'json',
            success: function(data){
                if(data.form_is_valid){
                    $('#meal-table tbody').html(data.meal_list);
                $('#modal-meal').modal('hide');
            } else {
                $('#modal-meal .modal-content').html(data.html_form)
            }
        }
        })
        return false;
    })
    });

推荐答案

由于我不知道django，所以我无法提供服务器端代码的帮助，但是ajax需要使用

I cant help with the server side code as I don't know django, but the ajax needs to use a FormData object to upload an image file.

$('#modal-meal').on('submit','.create-form' , function(){
    var form = $(this);
    var fd = new FormData(this);
    $.ajax({
        url: form.attr('data-url'),
        data: fd,
        type: form.attr('method'),
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(data){
            if(data.form_is_valid){
                $('#meal-table tbody').html(data.meal_list);
            $('#modal-meal').modal('hide');
        } else {
            $('#modal-meal .modal-content').html(data.html_form)
        }
    }
    })
    return false;
})

这篇关于如何修复从Django的引导模态形式上传图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！