Массовая загрузка изображений, представленных в нескольких категориях на одной HTML-странице - PullRequest
Новая
       13

Массовая загрузка изображений, представленных в нескольких категориях на одной HTML-странице

0 голосов
/ 15 октября 2018

У меня есть много изображений, хранящихся в одной папке в корзине S3.Есть три категории (скажем, A, B и C), и изображение попадет только в одну из трех категорий.Я отображаю все категории изображений на странице view-all.html.Я пытаюсь добавить отдельную кнопку загрузки рядом с названием каждой категории в файле view-all.html.При нажатии на конкретную кнопку загрузки изображения, представленные только в этой категории, должны быть загружены в виде zip-файла.В настоящее время кнопки загрузки не работают ни для одной из категорий.

Я редактировал только файлы view-all.html и views.py.Я много об этом искал, но не нашел точного решения.Я не уверен, должен ли я добавить что-либо еще в любой другой файл.Пожалуйста, помогите мне.Заранее спасибо.

view-all.html 

{% extends "cms/base.html" %}

{% block title %}
    View-all
{% endblock %}

{% block main %}
<style>
*{box-sizing: border-box;}
.wrapper{ 
    overflow-x:scroll;     
    white-space: nowrap;
}
.container {
    background: #ccc;
    position: relative;
    height: 50%;
    display: inline-block;
}
img {
    padding: 0;
    display: block;
    margin: 0 auto auto 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
   }
.overlay {
    position: absolute; 
    bottom: 0; 
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1; 
    width: 93%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
   }
.container:hover > .overlay {
    opacity: 1;
}
@media only screen and (max-width : 767px) 
{ 
    height: auto; 
    max-height: none; 
}
</style>
{% for category in categories %}
<br /><h3>{{ category.name }}&emsp;&emsp;<button name='downloadbtn' class="btn btn-primary" onclick='bulkdownload()'><i class="fa fa-download"></i> Download</button> </h3>
<div class="wrapper">   
    <div id="slider4" class="text-center">
        {%  for image in images %}
        {% ifequal image.category category %}
        <div class="container">
            <img src="S3-url"> 
            <br />
        </div>
        {% endifequal %}
        {% endfor %}
    </div>
</div>
{% endfor %}
{% endblock %}

views.py 

@login_required
def bulkdownload(request):

    if(request.GET.get('downloadbtn')): 
        images = Images.objects.all().filter(category = request.category.name)
        if images:
            categories = request.category.name
            zip_subdir = '{:%B %d, %Y}'.format(datetime.now()) # name of the zip file to be downlaoded
            zip_filename = '%s.zip' % zip_subdir

            # Open StringIO to grab in-memory ZIP contents
            s = io.StringIO.StringIO()

            # The zip compressor
            zf = zipfile.ZipFile(s, 'w')

            for fpath in images:
            # Calculate path for file in zip
                fdir, fname = os.path.split(fpath)
                zip_path = os.path.join(zip_subdir, fname)

            # Add file, at correct path
            zf.write(fpath, zip_path)

            # Must close zip for all contents to be written
            zf.close()

            # Grab ZIP file from in-memory, make response with correct MIME-type
            resp = HttpResponse(s.getvalue(), content_type = 'application/x-zip-compressed')
            # ..and correct content-disposition
            resp['Content-Disposition'] = 'attachment; filename=%s' % zip_filename

            return resp

1 Ответ

0 голосов
/ 15 октября 2018

Вы можете создавать формы и размещать данные для загрузки изображений в виде: 

{% for category in categories %}
  <form method='POST' action="{% url 'your_url_name_for_view' %}">
  <br /><h3>{{ category.name }}&emsp;&emsp;
  <input type="hidden" value="{{ category.id }}" name="category_id">
  <input name='downloadbtn' class="btn btn-primary" type="submit"><i class="fa fa-download"></i> Download</h3> 
 </form>
 <div class="wrapper">   
<div id="slider4" class="text-center">
    {%  for image in images %}
    {% ifequal image.category category %}
    <div class="container">
        <img src="S3-url"> 
        <br />
    </div>
    {% endifequal %}
    {% endfor %}
 </div>
</div>
{% endfor %}

Теперь, по вашему мнению, вы можете проверить категорию как: 

if request.method == 'POST': 
    category_id = request.POST.get('category_id')
    images = Images.objects.all().filter(category_id = category_id)

Надеюсь, это поможет.

...