AJAX DJango 从多个文件字段获取文件

2024-03-04

我正在使用 AJAX 和 DJango 进行多个文件上传,但遇到问题。 如何从字段输入获取文件并将其推送到data ? HTML:

<form id="add_photos" method="post" action="" enctype="multipart/form-data">

  {% csrf_token %}
  <input type="file" name="file[]" multiple id="files">

  <input type="submit" name="submit" value="Submit" />

</form>

JS:

function formSubmit(e) {
      e.preventDefault();

      $.ajax({
        method: 'POST',
        data: form.serialize(),
        url: '.',
        success: function(data) {
          console.log(data);
        },
        error: function (data) {
          console.log(data);
        }
      });
    }

请参阅下面的示例FormData。但请注意,它可能无法在旧的 IE 浏览器上运行(我认为 8、9 不起作用)。

<input type="file" id="upload_file" data-import-url="{% url 'upload_file' %}" data-csrf-token="{{ csrf_token }}" multiple>

然后是 jQuery:

$("#upload_file").change(function () {

  var url = $(this).attr("data-import-url")
  var data = new FormData();
  $.each($("#upload_file")[0].files, function(i, file) {
    data.append("file", file);
  });
  data.append("csrfmiddlewaretoken", $(this).attr("data-csrf-token"));

  $.ajax({
    url: url,
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'post',
    beforeSend: function () {
      // before send, display loading, etc...
    },
    success: function (data) {
      // success handling...
    },
    error: function () {
      // error handling... 
    }
  });

});

在你看来,你可以这样得到它:

uploaded_files = request.FILES.getlist('file')

如果您需要支持旧版浏览器,jQuery 文件上传 https://blueimp.github.io/jQuery-File-Upload/是一个非常好的图书馆。我写了一篇关于使用Django + Ajax上传多个文件 https://simpleisbetterthancomplex.com/tutorial/2016/11/22/django-multiple-file-upload-using-ajax.html(使用这个特定的库)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AJAX DJango 从多个文件字段获取文件 的相关文章

随机推荐