我目前正在我的网站上的自定义管理页面上工作,用户将被允许更新他们的个人资料页面。我有几个字段,包括用于配置文件图像的图像字段。。。然后,我创建了一个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请求的表单数据的一部分传递。我一直在研究,但还没有找到一个类似的问题,有一个解决办法。期待着很快从你们这些优秀的人那里得到帮助。
1条答案
按热度按时间bjp0bcyl1#
我找到了解决办法!我曾经
FormData
要打包编辑配置文件表单中的数据,请将图像字段附加到该表单FormData
然后提交。提交了一个有点不同的方法时,我使用的处理没有文件,但。更新在我的js。。。
然后在我的视图中,我将以正常方式初始化表单,而不进行任何反序列化。
这帮我完成了任务。。。又甜又好!:-)