Question

我在django中编辑表单时遇到问题。请别人帮助我吗？

我的表单有两个字段：vzeroall和description。通过此表单，用户可以编辑当前的文章数据。例如，向文章添加新的几个图像或更新/删除当前图像之一。要创建image，我使用了django-multiupload个应用。我也是通过ajax将数据加载到服务器。我尝试了下一个代码，但它没有显示我在图像字段中的当前图像。只有descrtiption字段工作正常，并显示当前数据。如何解决这个问题？

models.py：

image field

forms.py：

class Article(models.Model):
    project = models.ForeignKey(Project, on_delete=models.CASCADE)
    description = models.TextField(_('Description'))

class Image(models.Model):
    article= models.ForeignKey(Article, on_delete=models.CASCADE)
    image = models.FileField(_('Image'), upload_to='images/%Y/%m/%d/')

views.py：

class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = ('description', )

    image = MultiFileField()

    def save(self, commit=True):
        instance = super(ArticleForm, self).save(commit)
        return instance

JS：

def article_edit(request, article_id):
    data = dict()
    article= get_object_or_404(Article, pk=article_id)
    if request.method == 'POST':
        article_form = ArticleForm(request.POST, request.FILES, instance=article)
        if article_form.is_valid():
            article.save()
            data['form_is_valid'] = True
            articles = Article.objects.all
            context = {'articles': articles}
            context.update(csrf(request))
            data['html_article'] = render_to_string('project/article_list.html', context)
        else:
            data['form_is_valid'] = False
    else:
        article_form = ArticleForm(instance=article)
    context = {'article_form': article_form}
    data['html_article_form'] = render_to_string('project/article_edit.html', context, request=request)
    return JsonResponse(data)

article_edit：

$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_article_form);
            }
        });
    };

    var saveForm = function () {
        var form = $(this);
        var dataForm = new FormData(form.get(0));
        $.ajax({
            url: form.attr("action"),
            data: dataForm 
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#article-list").html(data.html_article);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_article_form);
                }
            }
        });
        return false;
    };

    // Create Article
    $("#article-add-button").click(loadForm);
    $("#modal").on("submit", ".js-article-add-form", saveForm);

    // Update Article
    $("#article-list").on("click", "#js-edit-article-button", loadForm);
    $("#modal").on("submit", ".js-article-edit-form", saveForm);
});

编辑多上传图像字段时出现问题

0 个答案: