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

Handling Form Upload Success with JQuery to Django App

本文关键字：Django App 表单 JQuery 成功 使用      更新时间：2023-09-26

如何使用JQuery提交一个表单，上传一个文件到Django应用程序，以便我可以捕获"success"处理程序?

我可以上传一个文件，我的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调用正确验证服务器端的表单?

使用jQuery表单插件

支持AJAX文件上传。

没有表单插件的另一个解决方案是这里如何在jQuery中发送ajax请求的FormData对象?但在浏览器中支持有限

相关文章：