Django загрузить несколько файлов изображений на сайт

Question

Я использую Django для разработки веб-сайта.Я новичок в Django и столкнулся с проблемой, как загрузить несколько изображений на сервер.

На моем веб-сайте я хочу разрешить пользователю добавлять несколько элементов и изображений.Я использую jQuery для добавления новой формы ввода на веб-странице, если пользователю нужно добавить более одного элемента.

model.py

class Menu(models.Model):
    restaurant_id = models.PositiveIntegerField()
    item = models.CharField(max_length = 200)
    price = models.FloatField()
    on_plate = models.ImageField(upload_to = 'menu/on_plate', null = True)
    on_deliver = models.ImageField(upload_to = 'menu/on_deliver', null = True)

форм.py

class UploadToMenu(forms.ModelForm):
    class Meta:
        model = Menu
        fields = ('item', 'price', 'on_plate', 'on_deliver')

views.py

def add_menu(request):
    if request.method == 'POST':
        rest = Menu(restaurant_id = '1')
        form = UploadToMenu(request.POST, request.FILES, instance=rest)
        print(form)
        if form.is_valid():
            form.save()
        return redirect(reverse('deliver:add_menu'))
    return render(request, 'deliver/menu.html')

HTML-шаблон

{%block content%}
<script type="text/javascript">
var total = 0;
function add_new_image(){
    total++;
  $('<tr>')
    .attr('id','menu'+total)
    .css({lineHeight:'20px'})
    .append (
        $('<tb>')
        .attr('id','td_title_'+total)
        .css({paddingRight:'5px',width:'200px'})
        .append(
            $('<input type="text" class="form-control"/>')
            .css({width:'500px'})
            .attr('id','item'+total)
            .attr('name','item')
        )
  )
  .append (
        $('<tb>')
        .attr('id','td_title_'+total)
        .css({paddingRight:'5px',width:'200px'})

     .append(
      $('<input type="text" class="form-control"/>')
      .css({width:'100px'})
      .attr('id','price'+total)
      .attr('name','price')
    )
    )
  .append (
    $('<tb>')
    .attr('id','td_title_'+total)
    .css({paddingRight:'5px',width:'200px'})

     .append(
      $('<input type="file" accept=".jpg,.gif,.png" />')
      .css({width:'500px'})
      .attr('id','on_plate'+total)
      .attr('name','on_plate')
    )
  )

  .append (
    $('<tb>')
    .attr('id','td_title_'+total)
    .css({paddingRight:'5px',width:'200px'})

     .append(
      $('<input type="file" accept=".jpg,.gif,.png" />')
      .css({width:'500px'})
      .attr('id','on_deliver'+total)
      .attr('name','on_deliver')
    )
  )



    .append (
        $('<td>')
        .css({width:'60px'})
        .append (
            $('<span id="progress_'+total+'" class="padding5px"><a  href="#" onclick="$(\'#menu'+total+'\').remove();" ><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></a></span>')
        )
    )
    .appendTo('#table_container');





}

</script>




<form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
    <table id="table_container">
        <tr>
            <td width="100px" colspan="2"><strong>Блюдо</strong></td>


        </tr>
    </table>
        <br/>
    <input type="button" value="Add one more field" id="add" onclick="return add_new_image();">
    <input type="submit" value="Submit">

</form>
{% endblock %}

Вкл.на странице появится форма для ввода "Item", "Price", изображения "on_plate" и изображения "on_deliver".Таким образом, один элемент должен иметь два изображения.

Проблема заключается в том, как загрузить файлы из этой формы на сервер.Если пользователь добавляет только один элемент, он работает нормально, но если пользователь добавляет несколько элементов, загружается только последний элемент

Answer 1

$ pip install django-multiupload

models.py

class Menu(models.Model):
 restaurant_id = models.PositiveIntegerField()
 item = models.CharField(max_length = 200)
 price = models.FloatField()

 def image(self):

    return self.images.all()


class MenuImage(models.Model):
   menu=models.ForeignKey(Menu,default=None,related_name='images' )
   on_plate = models.ImageField(upload_to = 'menu/on_plate', null = True)
   on_deliver = models.ImageField(upload_to = 'menu/on_deliver', null = True)

forms.py

  from multiupload.fields import MultiFileField

  class UploadToMenu(forms.ModelForm):
   class Meta:
    model = Menu
    fields = ('item', 'price')
  class ImageForm(forms.ModelForm):
  on_plate= MultiFileField(min_num=0, max_num=20,required=False )
  on_deliver= MultiFileField(min_num=0, max_num=20,required=False )
  class Meta:
    model = ImageModel
    fields = ('on_plate', 'on_deliver',)

views.py

def add_menu(request):
 ........
  for each in form.cleaned_data['on_plate']:##to loop over your images ##
            ..... and you create your objects here for each Image

вот источник github https://github.com/Chive/django-multiupload

Answer 2

Учебник по загрузке нескольких файлов @ simpleisbetterthancomplex.com

Вот довольно обширное руководство по загрузке нескольких файлов в проект django