title: Django upload several image files to website
body: <p>I am using Django to develop web site. I am new in Django and meet a problem how to upload several images to server.</p>
  
  <p>On my web site i want allow user to add several items and images. I am using jQuery to add new input form in web page if user need to add more than one item.</p>
  
  <p><strong>model.py</strong></p>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>class UploadToMenu(forms.ModelForm):
      class Meta:
          model = Menu
          fields = ('item', 'price', 'on_plate', 'on_deliver')
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>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')
  </code></pre>
  
  <p><strong>HTML template</strong></p>
  
  <pre><code>{%block content%}
  &lt;script type="text/javascript"&gt;
  var total = 0;
  function add_new_image(){
      total++;
    $('&lt;tr&gt;')
      .attr('id','menu'+total)
      .css({lineHeight:'20px'})
      .append (
          $('&lt;tb&gt;')
          .attr('id','td_title_'+total)
          .css({paddingRight:'5px',width:'200px'})
          .append(
              $('&lt;input type="text" class="form-control"/&gt;')
              .css({width:'500px'})
              .attr('id','item'+total)
              .attr('name','item')
          )
    )
    .append (
          $('&lt;tb&gt;')
          .attr('id','td_title_'+total)
          .css({paddingRight:'5px',width:'200px'})
  
       .append(
        $('&lt;input type="text" class="form-control"/&gt;')
        .css({width:'100px'})
        .attr('id','price'+total)
        .attr('name','price')
      )
      )
    .append (
      $('&lt;tb&gt;')
      .attr('id','td_title_'+total)
      .css({paddingRight:'5px',width:'200px'})
  
       .append(
        $('&lt;input type="file" accept=".jpg,.gif,.png" /&gt;')
        .css({width:'500px'})
        .attr('id','on_plate'+total)
        .attr('name','on_plate')
      )
    )
  
    .append (
      $('&lt;tb&gt;')
      .attr('id','td_title_'+total)
      .css({paddingRight:'5px',width:'200px'})
  
       .append(
        $('&lt;input type="file" accept=".jpg,.gif,.png" /&gt;')
        .css({width:'500px'})
        .attr('id','on_deliver'+total)
        .attr('name','on_deliver')
      )
    )
  
  
  
      .append (
          $('&lt;td&gt;')
          .css({width:'60px'})
          .append (
              $('&lt;span id="progress_'+total+'" class="padding5px"&gt;&lt;a  href="#" onclick="$(\'#menu'+total+'\').remove();" &gt;&lt;span class="glyphicon glyphicon-remove-circle" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;')
          )
      )
      .appendTo('#table_container');
  
  
  
  
  
  }
  
  &lt;/script&gt;
  
  
  
  
  &lt;form action="" method="post" enctype="multipart/form-data"&gt;
    {% csrf_token %}
      &lt;table id="table_container"&gt;
          &lt;tr&gt;
              &lt;td width="100px" colspan="2"&gt;&lt;strong&gt;Блюдо&lt;/strong&gt;&lt;/td&gt;
  
  
          &lt;/tr&gt;
      &lt;/table&gt;
          &lt;br/&gt;
      &lt;input type="button" value="Add one more field" id="add" onclick="return add_new_image();"&gt;
      &lt;input type="submit" value="Submit"&gt;
  
  &lt;/form&gt;
  {% endblock %}
  </code></pre>
  
  <p>On the page apear form to input "Item", "Price", image "on_plate" and image"on_deliver". So one item should have two images.</p>
  
  <p>The problem is how to upload files from this form to server. If user add only one item it works fine, but is user add several items only last item is uploaded</p>