当用户在Django中单击next时，逐个显示图像

Question

我创建了一个django应用程序，用户可以上传多个pdf文件，并将其转换为png并显示图像。我使用ModelForms用于此目的。上传和转换部分工作正常，但如何按顺序显示图像？

我想要的是显示一个图像，当用户单击下一个时，应该显示下一个图像。以下是我的应用程序代码：

型号.py

from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class UserUploadModel(models.Model):

user = models.ForeignKey(User, on_delete = models.CASCADE, null = True)
file = models.FileField(upload_to = 'file_uploads/%d%m%Y')

视图.py

from django.shortcuts import render, redirect
from app1.forms import UserUploadForm
from app1.models import UserUploadModel
from app1.convert import convert_file
from app1.transfer import move_dir
import os
from project1 import settings
# Create your views here.
def home(request):

if request.method == 'POST':
form = UserUploadForm(request.POST, request.FILES)

if form.is_valid():
f = form.save()
f.user = request.user
f.save()

ff = request.FILES.getlist('file')
f_list = []
for i in ff:
file_instance = UserUploadModel(file = i)
file_instance.save()
f_list.append(file_instance.file.path)

[convert_file(j) for j in f_list]
src_dir = os.getcwd()
dest_dir = os.path.join(src_dir, 'media/converted_files')            
move_dir(src_dir, dest_dir, '*.png')

return redirect('app1-display')
else:
form = UserUploadForm()
return render(request, 'app1/home.html', {'form' : form})

def display(request):
return render(request, 'app1/display.html')

home.html

{%extends "app1/base.html"%}
{%block content%}
<form method="POST" enctype="multipart/form-data">
{%csrf_token%}
{{form.as_p}}
<input type="submit">
</form>
{%endblock content%}

Answer 1

您可以在模板中显示所有用户的图像，然后使用javascript隐藏和显示图像：

app1/display.html

{% extends "app1/base.html" %}
{% block content %}
{% for image in request.user.useruploadmodel_set.all %}
<image src={{ image.url }} style="width: 100%{% if not forloop.first %}; display: none{% endif %}" />
{% endfor %}
<button id="nextBtn">Next</button
<script>
$(() => {
$("#nextBtn").click(() => {
$('image:visible').hide().next().show()
})
})
</script>
{% endblock %}

我使用jquery是因为我更习惯它，但这可以用另一个框架或香草JS来完成。

为什么不使用JS转盘库