ajax - Django Ajax 修改头像失败

问题描述

我正在尝试使用Django Ajax来修改用户的头像，但它不起作用。没有任何错误信息，只是不起作用。

这是我在模板中的表格：

<form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="{% url 'users:image_upload' %}" target='frameFile'>
<img id="avatarShow" src="{{ MEDIA_URL }}{{ request.user.image }}"/>
<input type="file" name="image" id="avatarUp" class=""/>
<button  type="submit">Modify Avatar</button>
{% csrf_token %}
</form>

这是我的阿贾克斯：

$("#jsAvatarForm").submit(function(){
    var image = $("#avatarShow").val()

    $.ajax({
        cache: false,
        type: "POST",
        url:"{% url 'users:image_upload' %}",
        data:{'user_pk':{{ user.pk }}, 'image':image},
        async: true,
        beforeSend:function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
        },
        success: function(data) {
            if(data.status == 'fail'){
                if(data.msg == '用户未登录'){
                    window.location.href="login";
                }else{
                    alert(data.msg)
                }
            }else if(data.status == 'success'){
                window.location.reload();//refresh current page.
            }

            },
    });
    return false;

});

这是views.py：

class UploadImageView(LoginRequiredMixin, View):
    def post(self, request):
        user_pk = request.POST.get("user_pk", 0)
        image = request.FILES.get('image')
        user_change = UserProfile()
        user_change.id = user_pk
        user_change.image = image
        user_change.save
        return HttpResponse('ok')

实际上我也有一个 forms.py 但我不知道如何将它与 ajax 一起使用：

class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['image']

这是我的用户模型，注意：我重写了我自己的用户：

class UserProfile(AbstractUser):
    image = models.ImageField(upload_to="image/%Y/%m", default="image/default.png", max_length=100,verbose_name='头像')

    class Meta:
        verbose_name = "用户信息"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.username

有朋友可以帮忙吗？非常感谢！

标签： ajaxdjangodjango-modelsdjango-formsdjango-views

显然，您可以通过 js 将诸如图像之类的文件发送到 django，这取决于您在问题中发布的内容，我向您展示了一种可以继续进行的方式，还有很多其他方法可以公平地完成此任务。

如果有任何问题，请随时发表评论。

$("#jsAvatarForm").submit(function(){
    var form = this;
    // var image = $("#avatarShow").val()  You can not retrieve the image like this
    var formData = new FormData($(form)[0]);
    // Everything inside the html form is serialized in the formData
    // No need to add X-CSRFToken, {% csrf_token %} is inside the form
    formData.append("NEW_KEY","NEW_VALUE"); # In case of further values


    $.ajax({
         url:$(form).attr('action'),
         type:$(form).attr('method'),
         data:formData,
         processData: false,
         contentType: false, //Don't set any content type header
         success: function(){
             // all your stuffs here
             $('#avatarShow').attr('src',data.avatar_url)
         },
         error:function(){
             alert("error");
         }
    });
    return false;
});

姜戈

from django.http import JsonResponse

    # codes here
    user_change.image = image
    user_change.save()
    return JsonResponse({'avatar_url':user_change.image.url})

注意：显示渲染此模板的帖子视图。

ajax - Django Ajax 修改头像失败

问题描述

解决方案

推荐阅读