Question

如何使用JQuery将表单上传到Django应用程序，以便我可以捕获“成功”处理程序？

我可以使用常规表单提交上传我的Django应用程序的文件，但是在POST完成后（当然）我被重定向到新的。

用于生成页面的Django views.py代码段为：

def adminImportView(request):
    """
    """
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            handle_file(request.FILES['file'])
            return HttpResponseRedirect(reverse('lobbyVisitorLog.view.adminView'))
    else:
        form = UploadFileForm()

    return render(request, 'utils/importDatabase.html', {'form': form});

当没有提交表单时，生成表单块：

<form id="dbImportForm" action="/visitorLog/admin/import/" enctype="multipart/form-data" method="post">
  {% csrf_token %}
  <div class="row">
    <div class="span7">
      <span class="btn btn-success fileinput-button">
        <i class="icon-plus"></i>
        <span>Browse...</span>
        {{ form.file }}
      </span>

      <button type="submit" class="btn btn-primary start" id="buttonImport">
        <i class="icon-upload"></i>
        <span>Start Import</span>
      </button>
    </div>
  </div>
</form>

但是，当进程完成时，我会避免加载新页面。如果我将button更改为一个简单的链接并使用JQuery进行操作，则表单验证失败。我对Javascript块的最新尝试是：

$('#buttonImport').click(function()
{
  if ($('#id_file').val() == '')
  {
    alert("empty file, can't submit!");
    return false;
  }

  $.post(
    '/visitorLog/admin/import/',
    $('#dbImportForm').serialize(),
    function(data)
    {
      alert("all done!");
    },
    "json"
  );
})

如何调整我的JQuery POST调用以正确验证服务器端的表单？

Answer 1

使用jQuery Form Plugin 。

它支持AJAX文件上传。

没有Form Plugin的另一个解决方案是How to send FormData objects with Ajax-requests in jQuery?，但在浏览器中支持有限。

使用JQuery处理表单上传成功到Django App

1 个答案: