使用不帶表單的Ajax上傳Django多個文件

Question

我在Django 2.0中有一個應用，一個用戶可以同時上傳許多文憑的圖像，但我也需要使用ajax來制作此圖像，以便頁面不會重新加載。

這是我的models.py

class diploma(models.Model):
    user = models.ForeignKey(user, on_delete=models.CASCADE, null=True)
    diploma=models.ImageField(default='nopic.png', null=True)
    def __str__(self):
        return self.diploma

這是我在模板upload.html中輸入的文件

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="file" id="images" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
<a onclick="uploadWithAjax()"> Upload Images </a>

如果您注意到，則沒有Form html標簽。 只是一個“ a”鏈接，它調用函數uploadWithAjax（）。

這是我的腳本，帶有uploadWithAjax（）函數

function uploadWithAjax()
{
  var files = $('#images')[0].files;
  $.ajax(
  {
    type: "POST",
    url: "/UploadImages/",
    data: "", //I DON'T KNOW WHAT DATA I HAVE TO PUT HERE
    success: function(result)
    {
      alert('IMAGES UPLOADED');
    }
  });
}

我想我必須在ajax的“數據”屬性中發送“文件”變量，但是我不確定是因為有文件並且沒有正常的輸入。 請幫忙。

這是我的ajax.py文件，我在其中接收圖像

def UploadImages(request):
  diplomas = request.FILES['images'] #I don't know if this is correct

我沒有完成視圖，因為我不知道如何繼續或如何在bd表中為上傳的每個圖像進行注冊。 請幫忙！

Answer 1

function uploadWithAjax() {
  var files = $('#images').prop("files");
  if(files.length > 0) {
      $.ajax({
         type: "POST",
         url: "/UploadImages/",
         data: {"images": files}
         success: function(result) {
             alert('IMAGES UPLOADED');
         }
      });
  }
}

在那里，您剛剛傳遞了一個圖像文件列表。