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)

forms.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 %}

在页面出现的表单上输入“项目”，“价格”，图像“ on_plate”和图像“ on_deliver”。所以一件物品应该有两张图片。

问题在于如何将文件从此表单上载到服务器。如果用户仅添加一项，则效果很好，但如果用户添加多项，则仅上传最后一项

Answer 1

Multiple File upload tutorial @ simpleisbetterthancomplex.com

关于如何将多个文件上传到django项目中，这是一个相当广泛的教程

Answer 2

$ 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

Django将多个图像文件上传到网站

2 个答案: