Javascript 如何在django中使用ajax post请求发送文件
我希望用户上传一个文件,该文件可以使用ajax通过post请求发送/ 尝试此代码时出现“文件”错误。请提前感谢 view.pyJavascript 如何在django中使用ajax post请求发送文件,javascript,jquery,python,ajax,django,Javascript,Jquery,Python,Ajax,Django,我希望用户上传一个文件,该文件可以使用ajax通过post请求发送/ 尝试此代码时出现“文件”错误。请提前感谢 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()
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>
阿贾克斯
你可以重用成熟的解决方案,lilke,这里有一个关于如何处理上传文件的好例子我建议你使用FormData,例子如下
$('#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
}
});
};