如何在django中使用ajax发布请求发送文件

Question

我希望用户上传一个可以通过发布请求使用ajax发送的文件。但是，我在上传/ “文件”中收到500：MultiValueDictKeyError， “错误，当我尝试此代码。事先提前。

view.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

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