【发布时间】：2021-02-16 13:44:54
【问题描述】：
我在模板中有两种不同形式的模型 我用一个表单更改用户的照片并用另一个表单编辑用户的文本配置文件 模型（配置文件）与主要 Django 用户是一对一的关系 但我对用户照片更改表单有疑问 单击作为配置文件模型的用户配置文件编辑表单时（用于文本更改） 照片更改表也称为并且始终有效 我的表单来自 Django 表单模型 肯定主要的问题是图像变化形式，但我不知道代码的哪一部分有问题。我使用 Ajax 将值发送到服务器。 下面我将显示代码和输出以更容易地传达概念
如果您不明白我的问题，我可以向您解释更多，只需给我您的电子邮件地址，以便我与您联系。谢谢。
查看
def edit_user_view(request, pk):
user = get_object_or_404(User, pk=pk)
c_default_user_edit_form = default_user_edit_form(
request.POST or None,
initial=vars(user),
instance=user
)
c_user_image_editing_form = user_image_editing_form(
request.POST or None,
request.FILES or None,
instance=user.profile
)
c_user_information_editing_form = user_information_editing_form(
request.POST or None,
initial=vars(user.profile),
instance=user.profile,
)
if c_default_user_edit_form.is_valid():
print("default user")
c_default_user_edit_form.save()
return JsonResponse({'s': 's'})
if c_user_information_editing_form.is_valid():
c_user_information_editing_form.save()
if c_user_image_editing_form.is_valid():
print("image user")
user.profile.save()
return JsonResponse({'src': user.profile.user_profile.url})
context = {
'default_user_edit_form': c_default_user_edit_form,
'user_image_editing_form': c_user_image_editing_form,
'user_information_editing_form': c_user_information_editing_form,
'editing_user': user,
}
return render(request, 'AdminPanel/Users/user-edit.html', context)
型号
class Profile(models.Model):
gender_selection_choices = [
('MS', 'زن'),
('MR', 'مرد'),
('TG', 'دیگر'),
]
user = models.OneToOneField(
User,
on_delete=models.CASCADE
)
user_profile = models.ImageField(
verbose_name="پروفایل",
upload_to=RenameUserPhoto,
validators=[ImageSizaValidators],
default='images/User/UserProfile/icon-avatar-default.png',
blank=True
)
gender_selection = models.CharField(
verbose_name='انتخاب جنسیت',
max_length=2,
blank=True,
default="NS",
choices=gender_selection_choices,
)
postal_code = models.CharField(
verbose_name='کد پستی',
max_length=20,
validators=[postal_code_validator],
blank=True,
help_text='کد پستی 10 رقمی میتواند شامل خط تیره (-) یا نباشد',
)
phone_number = models.CharField(
max_length=11,
verbose_name='شماره تماس',
help_text='شماره تماس باید 11 رقمی باشد و میتواند شامل صفر در ابتدای شماره نباشد',
blank=True,
validators=[phone_number_validator],
)
location_first = models.CharField(
max_length=250,
blank=True,
verbose_name="آدرس (1)"
)
NumberOfEmailsSentActivationLink = models.IntegerField(
blank=True,
default=0,
verbose_name="تعداد ایمیل ارسالی فعالسازی حساب کاربری"
)
NumberOfEmailsSentToTheUser = models.IntegerField(
blank=True,
default=0,
verbose_name="تعداد ایمیل های ارسال شده برای کاربر"
)
objects = CustomModelManagerProfile()
def get_absolute_url(self):
return reverse_lazy('AdminSite__Ak:edit_user_view', kwargs={
'pk': self.user.pk
})
表格
class user_information_editing_form(forms.ModelForm):
class Meta:
model = Profile
fields = (
'phone_number',
'postal_code',
'location_first',
'gender_selection',
)
widgets = {
'phone_number': forms.NumberInput(
attrs={
'class': 'form-control',
'placeholder': 'تلفن همراه را وارد نمایید...',
}),
'postal_code': forms.TextInput(attrs={
'class': 'form-control',
'placeholder': 'کد پستی را وارد نمایید...'
}),
'location_first': forms.Textarea(attrs={
'rows': 1,
'style': 'resize:none;height:2.7125rem',
'class': 'form-control',
'placeholder': 'آدرس خود را وارد نمایید...'
}),
'gender_selection': forms.Select(attrs={
'class': 'form-control'
})
}
class user_image_editing_form(forms.ModelForm):
class Meta:
model = Profile
fields = ('user_profile',)
widgets = {
'user_profile': forms.FileInput()
}
Ajax
// Change User Photo
$('button.user-photo-change-btn').click(function () {
const image_input = $('input[name="user_profile"]').click()
let formData = new FormData();
image_input.change(function () {
let formData = new FormData();
formData.append('user_profile', $('form#form-change-photo input[name="user_profile"]').prop('files')[0])
formData.append('csrfmiddlewaretoken', $('form#form-change-photo input[name="csrfmiddlewaretoken"]').val())
jQuery.ajax({
url: location.href,
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (Data) {
$('img.users-avatar-shadow').attr('src', Data.src)
}
});
})
})
//Account change information form
$('form#account_change_information_form button[type="button"]').click(function () {
$.ajax({
url: location.href,
data: $('form#account_change_information_form').serialize(),
type: 'POST',
cache:false,
success: function () {
}
})
})
HTML
{% extends 'AdminPanel/__Main__/base.html' %}
{% load static %}
<!--Title-->
{% block title_edit_user %}
ویرایش کاربر
{% endblock %}
<!-- BEGIN: Vendor CSS-->
{% block vendor_css_edit_user %}
<link rel="stylesheet" type="text/css"
href="{% static 'AdminPanel/app-assets/css-rtl/plugins/forms/validation/form-validation.css' %}">
<link rel="stylesheet" type="text/css"
href="{% static 'AdminPanel/app-assets/vendors/css/forms/select/select2.min.css' %}">
<link rel="stylesheet" type="text/css"
href="{% static 'AdminPanel/app-assets/vendors/css/pickers/pickadate/pickadate.css' %}">
{% endblock %}
<!-- END: Vendor CSS-->
<!-- BEGIN: Page CSS-->
{% block page_css_edit_user %}
<link rel="stylesheet" type="text/css" href="{% static 'AdminPanel/app-assets/css-rtl/pages/app-user.min.css' %}">
{% endblock %}
<!-- END: Page CSS-->
<!-- BEGIN: Content-->
{% block edit_user %}
<div class="app-content content">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body"><!-- users edit start -->
<section class="users-edit">
<div class="card">
<div class="card-content">
<div class="card-body">
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item">
<a class="nav-link d-flex align-items-center active" id="account-tab"
data-toggle="tab" href="#account"
aria-controls="account" role="tab" aria-selected="true">
<i class="feather icon-user mr-25"></i><span
class="d-none d-sm-block">حساب</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" id="information-tab"
data-toggle="tab" href="#information"
aria-controls="information" role="tab" aria-selected="false">
<i class="feather icon-info mr-25"></i><span class="d-none d-sm-block">اطلاعات</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="account" aria-labelledby="account-tab"
role="tabpanel">
<!-- users edit media object start -->
<div class="media mb-2">
<a class="mr-2 my-25" href="#">
<img src="{{ editing_user.profile.user_profile.url }}" alt="users avatar"
class="users-avatar-shadow rounded" height="90" width="90">
</a>
<div class="media-body mt-50">
<h4 class="media-heading">{{ user.get_full_name }}</h4>
<div class="col-12 d-flex mt-1 px-0">
<form action="" method="post" id="form-change-photo"
class="form-inline" enctype="multipart/form-data">
{% csrf_token %}
{{ user_image_editing_form.user_profile }}
<button type="button"
class="btn btn-primary d-none d-sm-block mr-75 user-photo-change-btn">
تغییر دادن
</button>
<button type="button"
class="btn btn-outline-danger d-none d-sm-block user-photo-delete-btn">
پاک کردن
</button>
</form>
</div>
</div>
</div>
<!-- users edit media object ends -->
<!-- users edit account form start -->
<form novalidate method="post" id="form_default_user">
{% csrf_token %}
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<div class="controls">
<label>پست الکترونیک</label>
{{ default_user_edit_form.username }}
</div>
</div>
<div class="form-group">
<div class="controls">
<label>نام</label>
{{ default_user_edit_form.first_name }}
</div>
</div>
<div class="form-group">
<div class="controls">
<label>نام خانوادگی</label>
{{ default_user_edit_form.last_name }}
</div>
</div>
</div>
{# User Permission #}
<div class="col-12 mt-2">
<div class="table-responsive border rounded px-1 ">
<h6 class="border-bottom py-1 mx-1 mb-0 font-medium-2"><i
class="feather icon-lock mr-50 "></i>وضعیت حساب کاربری
</h6>
<table class="table table-borderless">
<thead>
<tr>
<th>دسترسی های کاربر</th>
<th>فعال / غیرفعال</th>
<th>کاربر ویژه</th>
<th>کارمند</th>
</tr>
</thead>
<tbody>
<tr>
<td>کاربران</td>
<td>
<div class="custom-control custom-checkbox">
{{ default_user_edit_form.is_active }}
<label class="custom-control-label"
for="user-active"></label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
{{ default_user_edit_form.is_superuser }}
<label class="custom-control-label"
for="user-superuser"></label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
{{ default_user_edit_form.is_staff }}
<label class="custom-control-label"
for="user-personnel"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
<button type="button"
class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1"
id="btn-apply-default-user-changes">
ذخیره تغییرات
</button>
<button type="reset" class="btn btn-outline-warning">تنظیم مجدد
</button>
</div>
</div>
</form>
<!-- users edit account form ends -->
</div>
<div class="tab-pane" id="information" aria-labelledby="information-tab"
role="tabpanel">
<!-- users edit Info form start -->
<form method="post" novalidate id="account_change_information_form">
{% csrf_token %}
<div class="row mt-1">
<div class="col-12 col-sm-6">
<h5 class="mb-1"><i class="feather icon-user mr-25"></i>اطلاعات شخصی
</h5>
<div class="form-group">
<div class="controls">
<label for="">تلفن همراه</label>
{{ user_information_editing_form.phone_number }}
</div>
</div>
<div class="form-group">
<label>انتخاب جنسیت</label>
{{ user_information_editing_form.gender_selection }}
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="mb-1 mt-2 mt-sm-0"><i
class="feather icon-map-pin mr-25"></i>نشانی</h5>
<div class="form-group">
<div class="controls">
<label>آدرس</label>
{{ user_information_editing_form.location_first }}
</div>
</div>
<div class="form-group">
<div class="controls">
<label>کد پستی</label>
{{ user_information_editing_form.postal_code }}
</div>
</div>
</div>
<div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
<button type="button"
class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1"
id="Test">
ذخیره تغییرات
</button>
<button type="reset" class="btn btn-outline-warning">تنظیم مجدد
</button>
</div>
</div>
</form>
<!-- users edit Info form ends -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- users edit ends -->
</div>
</div>
</div>
{% endblock %}
<!-- END: Content-->
<!-- BEGIN: Page Vendor JS-->
{% block page_vendor_js_edit_user %}
<script src="{% static 'AdminPanel/app-assets/vendors/js/forms/select/select2.full.min.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/vendors/js/forms/validation/jqBootstrapValidation.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/vendors/js/pickers/pickadate/picker.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/vendors/js/pickers/pickadate/picker.date.js' %}"></script>
{% endblock %}
<!-- END: Page Vendor JS-->
<!-- BEGIN: Page JS-->
{% block page_js_edit_user %}
<script src="{% static 'AdminPanel/app-assets/js/scripts/pages/app-user.min.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/js/scripts/navs/navs.min.js' %}"></script>
{% endblock %}
<!-- END: Page JS-->
【问题讨论】：
标签： python python-3.x django django-forms