使用ajax提交django表单时未提交文件/图像字段

bt1cpqcv  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(439)

我目前正在我的网站上的自定义管理页面上工作,用户将被允许更新他们的个人资料页面。我有几个字段,包括用于配置文件图像的图像字段。。。然后,我创建了一个editprofileform来处理此操作。我已经了解了如何在ajax请求中序列化表单,以便将表单数据发布到服务器端。我把它用于其他没有文件字段的表单,它工作得很好。但不知怎的,它只是不适用于这种形式的图像领域。
forms.py

class EditProfileForm(forms.Form):
    avatar = forms.ImageField(widget=forms.ClearableFileInput(attrs=edit_profile_form_fields['avatar']), label='Change Profile Image')
    mobile = forms.CharField(widget=forms.TextInput(attrs=edit_profile_form_fields['mobile']), label='Mobile Number', required=False)
    street = forms.CharField(widget=forms.TextInput(attrs=edit_profile_form_fields['street']), label='Street', required=False)
    city = forms.CharField(widget=forms.TextInput(attrs=edit_profile_form_fields['city']), label='City', required=False)
    state = forms.CharField(widget=forms.TextInput(attrs=edit_profile_form_fields['state']), label='State', required=False)
    country = forms.CharField(widget=forms.TextInput(attrs=edit_profile_form_fields['country']), label='Country', required=False)
    about = forms.CharField(widget=forms.Textarea(attrs=edit_profile_form_fields['about']), label='About Me', required=False)

    def clean_mobile(self):
        if Account.objects.filter(mobile=self.cleaned_data['mobile']).exists() and len(self.cleaned_data['mobile']) > 0:
            raise forms.ValidationError('Mobile already exists!')

        return self.cleaned_data['mobile']

    def save(self, user_id):
        account = Account.objects.get(user_id=user_id)

        account.avatar = self.cleaned_data['avatar']
        account.mobile = self.cleaned_data['mobile']
        account.street = self.cleaned_data['street']
        account.city = self.cleaned_data['city']
        account.state = self.cleaned_data['state']
        account.country = self.cleaned_data['country']
        account.about = self.cleaned_data['about']
        account.save()

在我的html中我有。。。

<form id="edit-profile-form" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-group">
        <label for="avatar">
            {{ edit_profile_form.avatar.label }}
        </label>
        {{ edit_profile_form.avatar }}
     </div>

     <div class="form-group">
         <label for="mobile">
             {{ edit_profile_form.mobile.label }}
             <span class="mobile-exist text-danger" style="display: none;"></span>
         </label>
         {{ edit_profile_form.mobile }}
     </div>

     <div class="form-group">
         <label for="street">
             {{ edit_profile_form.street.label }}
         </label>
         {{ edit_profile_form.street }}
     </div>

     <div class="form-group">
         <label for="city">
             {{ edit_profile_form.city.label }}
         </label>
         {{ edit_profile_form.city }}
     </div>

     <div class="form-group">
         <label for="country">
             {{ edit_profile_form.country.label }}
         </label>
         {{ edit_profile_form.country }}
     </div>

     <div class="form-group">
         <label for="about">
             {{ edit_profile_form.about.label }}
         </label>
         {{ edit_profile_form.about }}
     </div>

     <div class="d-flex align-items-center">
         <button type="submit" class="btn btn-outline-warning px-3" id="edit-profile-submit-btn">
              Update Profile <span class="btn-icon-right"><i class="fa fa-save"></i></span>
         </button>

         <button type="reset" class="btn btn-outline-primary px-3 ml-3" id="edit-profile-reset-btn">
              Reset <span class="btn-icon-right"><i class="fa fa-refresh"></i></span>
         </button>

         <button type="button" class="btn btn-outline-danger px-3 ml-3" id="edit-profile-div-close">
              Cancel <span class="btn-icon-right"><i class="fa fa-times"></i></span>
         </button>
     </div>
</form>

在我做ajax调用的js中,我有。。。

var csrfmiddlewaretoken = $("#edit-profile-form").find("input[name='csrfmiddlewaretoken']").val();
 var form_data = $('#edit-profile-form').serialize();

 $.ajax({
     type: 'POST',
     url: '/edit-profile/',
     dataType : "json",
     data : {
         csrfmiddlewaretoken: csrfmiddlewaretoken,
         form_data: form_data,
     },

     success: function (data){
         console.log('Success');
     },

     error: function (){
         console.log('Error');
     }
 });

现在在我处理这个帖子请求的视图中,我有。。。

class EditProfileView(LoginRequiredMixin, TemplateView):
    template_name = 'dashboard/pages/profile.html'
    form_class = EditProfileForm

    def post(self, request, *args,**kwargs):
        from django.http import QueryDict  #To basically de-serialize the serialized form passed by the Ajax request

        new_form_data = QueryDict(request.POST['form_data'].encode('ASCII'))

        #From the new form data (QueryDict Obj), I will set a dict.
        data = {
            'avatar': new_form_data.get('avatar'),
            'mobile': new_form_data.get('mobile'),
            'street': new_form_data.get('street'),
            'city': new_form_data.get('city'),
            'state': new_form_data.get('state'),
            'country': new_form_data.get('country'),
            'about': new_form_data.get('about'),
        }

        #Passing data dict as an argument to initialize the form
        form = self.form_class(data)

        if form.is_valid():
            print('Form is valid')

        else:
            print('Form is not valid')

我试着打印我创建的数据记录,但是“阿凡达”没有。这里有一个例子。。。
表格:

打印数据的结果。。。

因此,即使我上传了图像,它也没有作为来自ajax请求的表单数据的一部分传递。我一直在研究,但还没有找到一个类似的问题,有一个解决办法。期待着很快从你们这些优秀的人那里得到帮助。

bjp0bcyl

bjp0bcyl1#

我找到了解决办法!我曾经 FormData 要打包编辑配置文件表单中的数据,请将图像字段附加到该表单 FormData 然后提交。提交了一个有点不同的方法时,我使用的处理没有文件,但。
更新在我的js。。。

var form = $("#edit-profile-form")[0];
var form_data = new FormData(form);

// Appending the attached file to the form_data to access it from the server side
form_data.append('new_avatar', $("#avatar")[0].files[0]);

$.ajax({
    type: 'POST',
    url: '/edit-profile/',
    data: form_data,
    cache: false,
    processData: false,
    contentType: false,

    success: function (data){
        console.log('Success');
    },

    error: function (){
       console.log('Error');
    }
});

然后在我的视图中,我将以正常方式初始化表单,而不进行任何反序列化。

def post(self, request, *args,**kwargs):
        context = {}
        form = self.form_class(data=request.POST, files=request.FILES)

        if form.is_valid():
            print('Form is valid')

        else:
            print('Form is not valid')

        return JsonResponse(context)

这帮我完成了任务。。。又甜又好!:-)

相关问题