Я пытаюсь создать систему, которая позволяет пользователям загружать изображения, я использую Django 2.1 и следую этому курсу .Я использую точный код, но он не работает, я не знаю, в чем проблема, может быть, JS код не работает Это мой код
item_images_creation.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Photos Library - Simple is Better Than Complex{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.page-header {
margin-top: 0;
}
</style>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery-file-upload/vendor/jquery.ui.widget.js' %}"></script>
<script src="{% static 'js/jquery-file-upload/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'js/jquery-file-upload/jquery.fileupload.js' %}"></script>
<script src="{% static 'photos/js/progress-bar-upload.js' %}"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">
Photos
<small></small>
</h1>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Examples</h3>
</div>
<a href="{% url 'item:progress_bar_upload' %}" class="list-group-item{% if request.path == '/progress-bar-upload/' %} active{% endif %}">
Progress Bar Upload
</a>
</a>
</div>
</div>
</div>
<div class="col-md-9">
<div style="margin-bottom: 20px;">
<button type="button" class="btn btn-primary js-upload-photos">
<span class="glyphicon glyphicon-cloud-upload"></span> Upload photos
</button>
<input id="fileupload" type="file" name="file" multiple
style="display: none;"
data-url="{% url 'item:progress_bar_upload' %}"
data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
</div>
<table id="gallery" class="table table-bordered">
<thead>
<tr>
<th>Photo</th>
</tr>
</thead>
<tbody>
{% for photo in photos %}
<tr>
<td><a href="{{ photo.file.url }}">{{ photo.file.name }}</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Uploading...</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
models.py
class Photo(models.Model):
title = models.CharField(max_length=255, blank=True)
file = models.FileField(upload_to='media/item_image')
uploaded_at = models.DateTimeField(auto_now_add=True)
forms.py
class PhotoForm(forms.ModelForm):
class Meta:
model = Photo
fields = ('file', )
views.py
class ProgressBarUploadView(View):
def get(self, request):
photos_list = Photo.objects.all()
return render(self.request, 'zwwebsite/item_images_creation.html', {'photos': photos_list})
def post(self, request):
time.sleep(1) # You don't need this line. This is just to delay the process so you can see the progress bar testing locally.
form = PhotoForm(self.request.POST, self.request.FILES)
if form.is_valid():
photo = form.save()
data = {'is_valid': True, 'name': photo.file.name, 'url': photo.file.url}
else:
data = {'is_valid': False}
return JsonResponse(data)
urls.py
from django.urls import path
from item.views import ProgressBarUploadView
app_name = 'item'
urlpatterns = [
path('progress-bar-upload/', ProgressBarUploadView.as_view(), name='progress_bar_upload'),
]
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
"""STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]"""
# upload images
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
urls.py
from django.contrib import admin
from django.urls import include, path
from django.contrib.staticfiles.urls import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from item.views import user_authentication
from . import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('authentication.urls')),
path('', include('stores.urls')),
path('', include('item.urls')),
path('', include('search.urls')),
path('check-login/', user_authentication, name='check-login'),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Вот так выглядит моя вкладка "Сеть" в браузере
Ссылка на изображение
появляется примечаниево вкладке консоли
и вот так выглядит моя командная строка
Ссылка на изображение
Пожалуйста, помогите мне решить эту проблему