使用 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 标签。只是一个调用函数 uploadWithAjax() 的 'a' link。

这是我的带有 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 的 'data' 属性中发送 'files' 变量，但我不确定，因为有文件并且没有正常输入。请帮忙。

这是我的 ajax.py 文件，我在其中接收图像

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

我没有完成查看，因为我不知道如何继续或如何在我的 bd table 中为我上传的每张图片进行注册。请帮忙！

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');
         }
      });
  }
}

在那里，您刚刚传递了一个图像文件列表。

使用 Ajax 不带表单的 Django 多个文件上传

Django Multiple Files Upload Using Ajax without forms

javascript

python

django

ajax

image-uploading