javascript - 如何在django中使用ajax post请求发送文件

Question

我希望用户以可以使用 ajax 通过 post 请求发送的表单上传文件。但是我在/uploaded/收到 500: MultiValueDictKeyError当我尝试此代码时出现“'files'”错误。提前致谢。

查看.py

def uploaded(request):
    upl=job(jobtitle=request.POST.get('jt'),jobdes=request.POST.get('tag'))
    upl.save()
    fil=resume(job=upl,resume=request.FILES['files'])
    fil.save()
    return redirect(selected)

表单 html

<form method="post" id="upload" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="form-group">
    <label for="JobTitile">Job Title</label>
    <input type="text" class="form-control" id="JobTitle" name="jt" placeholder="Job Title" required>
  </div>
  <div class="form-group">
    <label for="FileInput">Select Resumes</label>
    <input type="file" name="files" id="FileInput" required>
  </div>
  <div class="control-group">
    <label class="control-label">Sections to look for</label>
    <div class="">
      <input id="tags_1" type="text" class="tags form-control" name="tag" value="" required style="height:1px !important;">
      <div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div>
    </div>
  </div><br/>
  <button type="submit" class="btn btn-default">Submit</button>
</form>  

ajax

$('#upload').on('submit', function(event){
  event.preventDefault();
  console.log("form submitted!")  // sanity check
  create_post();
});

function create_post() {
  var files = $('#FileInput').get(0).files[0];
  console.log("create post is working!")
  console.log(files)
  $.ajax({
    url : "/uploaded/", // the endpoint
    type : "POST", // http method
    data : {
      jt: $('#JobTitle').val(),
      file: files.name,
      tag: $('#tags_1').val(),
      'csrfmiddlewaretoken': '{{ csrf_token }}'

    }, // data sent with the post request

    // handle a successful response
    success : function(json) {
      $('#JobTitle').val(''); // remove the value from the input
      $('#FileInput').val(''); 
      $('#tags_1').html("<div class='alert alert-success alert-dismissable'><a href='#'' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong> Your request has been recored</div>");
      console.log(json); // log the returned json to the console
      console.log("success"); // another sanity check
    },

    // handle a non-successful response
    error : function(xhr,errmsg,err) {
      $('#results').html("<div class='alert alert-danger alert-dismissable'><a href='#'' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Oops!</strong> Something went wrong</div>"); // add the error to the dom
      console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
    }
  });
};

Answer 1

您可以重复使用成熟的解决方案，例如 jQuery-File-Upload django docs 中有一个关于如何处理上传文件的很好的例子。