如何在 Django 中单击更新按钮之前显示个人资料图片（我选择更新的图片）

Question

我正在开发一个用户可以更新个人资料信息（用户名、个人简介、网址、个人资料图片）的项目。在 user_update.html 文件中，我为个人资料图片使用了 bootstrap 模态，在模态对话框中，会有一个按钮“上传照片”。因此，通过单击对话框中的此按钮，用户可以更改个人资料图片。用户还可以编辑用户名、简历、网址等信息。问题是每当用户想要更改个人资料图片时，它都会更改个人资料图片并重定向到时间线页面。但有时用户不仅想要更新个人资料图片，还想要用户名、个人简介或网址。在我下面附上的代码中，用户在更改个人资料图片时无法更新其他信息，例如个人简介或网址或用户名，因为系统会在更改其他信息并单击更新按钮之前将他们重定向到时间线页面。

所以，我想要的是在我选择的 user_update.html 中显示个人资料图片，而不是在单击更新按钮之前重定向到时间线页面。此外，如果用户单击取消按钮，系统会将他们重定向到时间线页面，因此如果用户选择个人资料图片，则不会更改，因此之前的个人资料图片将显示在时间线页面中，因为他们没有单击更新按钮。

user_update.html

{% load static %}
{% load crispy_forms_tags %}


{% block content %}
<main role="main" class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="content-section">
        <div class="media">
          <a href="#" data-toggle="modal" data-target="#profilePicModal">
            <img class="rounded-circle account-img" src="{{ user.profile_picture.url }}">
          </a>
        </div>
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Edit Profile</legend>
               {{ u_form|crispy }}
                
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Update</button>
                <a class="btn btn-outline-secondary" href="{% url 'timeline' %}">Cancel</a>
            </div>
       
      </div>
    </div>
  </div>
</main>

<!-- Modal -->
<div class="modal fade" id="profilePicModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Choose Profile Picture</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- {{ p_form|crispy }} -->
        <!-- {% for field in p_form.visible_fields %}
            {{field}}
        {% endfor %} -->
        <li class="list-group-item text-center">Upload Photo
            {{p_form.profile_picture}}
            
      </div>
    </div>
  </div>
</div>
</form>

{% endblock content %}

表格.py

class UserUpdateForm(forms.ModelForm):
    username = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'type': 'username', 'placeholder': 'username'}), label='', required=False)
    first_name = forms.CharField(widget=forms.TextInput(attrs={'class': 'input','placeholder': 'First Name'}), label='', required=False)
    last_name = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'Last Name'}), label='', required=False)
    email = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'type': 'email', 'placeholder': 'Last Name'}), label='', required=False)
    bio = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'Bio'}), label='', required=False)
    url = forms.CharField(widget=forms.TextInput(attrs={'class': 'input', 'placeholder': 'URL'}), label='', required=False)

    class Meta:
        model = User 
        fields = ['username', 'first_name', 'last_name', 'email', 'bio', 'url']



class ProfilePicUpdateForm(forms.ModelForm):
    profile_picture = forms.ImageField(widget=forms.FileInput(attrs={'onchange':"this.form.submit()",'type':'file', 'style': 'position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;'}), label='', required=False) # profile_picture = forms.FileField(widget=FileInput, label='', required=False)

    class Meta:
        model = User 
        fields = ['profile_picture']

def userUpdate(request):
    if request.method == 'POST':
        u_form = UserUpdateForm(request.POST, instance=request.user)
        p_form = ProfilePicUpdateForm(request.POST, request.FILES, instance=request.user)
        if u_form.is_valid() and p_form.is_valid():
            u_form.save()
            p_form.save()
            return redirect('timeline')
    else:
        u_form = UserUpdateForm(instance=request.user)
        p_form = ProfilePicUpdateForm(instance=request.user)

    context = {
        'u_form': u_form,
        'p_form': p_form
    }

    return render(request, 'users/user_update.html', context)

Answer 1

这是因为 Django 需要将信息发送到服务器，然后如果一切正常，你就放

return redirect('timeline')

。

这里有2个选项，你可以添加一个保持相同页面的参数，当这个参数改变时你返回到时间线。像这样的东西：

def userUpdate(request, go_timeline):
    if request.method == 'POST':
        u_form = UserUpdateForm(request.POST, instance=request.user)
        p_form = ProfilePicUpdateForm(request.POST, request.FILES, instance=request.user)
        if u_form.is_valid() and p_form.is_valid() and not go_timeline:
            u_form.save()
            p_form.save()
            return redirect('userUpdate')
        elif u_form.is_valid() and p_form.is_valid() and go_timeline:
            u_form.save()
            p_form.save()
            return redirect('timeline')
    else:
        u_form = UserUpdateForm(instance=request.user)
        p_form = ProfilePicUpdateForm(instance=request.user)

    context = {
        'u_form': u_form,
        'p_form': p_form
    }

    return render(request, 'users/user_update.html', context)

这将重新加载页面，但您将被重定向到相同的更新页面。

第二个选项是使用 Javascript，您将重新加载一些元素并使用 javascript 发送请求。但如果你不知道 Javascript，我推荐第一个选项。