title: How to send file using ajax post request in django
body: <p>I want the user to upload a file in a form which can be sent via post request using ajax .But I am getting 500: MultiValueDictKeyError at /uploaded/
  "'files'" error when I try this code.THANKS in advance.</p>
  
  <p>view.py</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>form html</p>
  
  <pre><code>&lt;form method="post" id="upload" enctype="multipart/form-data"&gt;
    {% csrf_token %}
    &lt;div class="form-group"&gt;
      &lt;label for="JobTitile"&gt;Job Title&lt;/label&gt;
      &lt;input type="text" class="form-control" id="JobTitle" name="jt" placeholder="Job Title" required&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="FileInput"&gt;Select Resumes&lt;/label&gt;
      &lt;input type="file" name="files" id="FileInput" required&gt;
    &lt;/div&gt;
    &lt;div class="control-group"&gt;
      &lt;label class="control-label"&gt;Sections to look for&lt;/label&gt;
      &lt;div class=""&gt;
        &lt;input id="tags_1" type="text" class="tags form-control" name="tag" value="" required style="height:1px !important;"&gt;
        &lt;div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;br/&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;  
  </code></pre>
  
  <p>ajax</p>
  
  <pre><code>$('#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("&lt;div class='alert alert-success alert-dismissable'&gt;&lt;a href='#'' class='close' data-dismiss='alert' aria-label='close'&gt;×&lt;/a&gt;&lt;strong&gt;Success!&lt;/strong&gt; Your request has been recored&lt;/div&gt;");
        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("&lt;div class='alert alert-danger alert-dismissable'&gt;&lt;a href='#'' class='close' data-dismiss='alert' aria-label='close'&gt;×&lt;/a&gt;&lt;strong&gt;Oops!&lt;/strong&gt; Something went wrong&lt;/div&gt;"); // add the error to the dom
        console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
      }
    });
  };
  </code></pre>