使用AJAX上传文件在Django中不起作用



我正在尝试使用onchange事件和AJAX上传文件,但它不起作用。我得到的是后端的文件路径,而不是实际的文件。我想修改这个代码,这样当pdf文件选择时,文件会自动上传,并可以在views.py.中使用

a.html:

<html>
<head>
<title> Django image and file upload using ajax </title>
</head>
<body>
<form enctype="multipart/form-data" id="id_ajax_upload_form" method="POST" novalidate="">
{%csrf_token%}
<input type="file" id="resumes" onchange="funct()" name="resumes">
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(document).ready(function(){
$("#file").change(function(){
var filename = $("#file").val();
$.ajax({
type: "POST",
url: "",
enctype: 'multipart/form-data',
data: {
file: filename,
},
success: function () {
// alert("Data Uploaded: ");
}
});
})
})
</script>
</body>
</html>

Views.py:

def django_image_and_file_upload_ajax(request):
if request.method == 'POST':
print("working..............")
print(request.POST.get('file'))
print(request.FILES.get('file'))
print(request.FILES.getlist("file"))
print("...................................................")
print(request.POST.get('data'))
print(request.FILES.get('data'))
print(request.FILES.getlist("data"))
return JsonResponse({'error': False, 'message': 'file'})
return render(request, 'a.html')

选择文件时的控制台输出:

System check identified no issues (0 silenced).
December 08, 2020 - 06:55:41
Django version 3.1.3, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
Not Found: /
[08/Dec/2020 06:55:46] "GET / HTTP/1.1" 404 2131
Not Found: /favicon.ico
[08/Dec/2020 06:55:46] "GET /favicon.ico HTTP/1.1" 404 2182
[08/Dec/2020 06:55:51] "GET /URL1/upload/ HTTP/1.1" 200 2318
working..............
C:fakepathdummy3.pdf
None
[]
...................................................
None
None
[]
[08/Dec/2020 06:56:09] "POST /URL1/upload/ HTTP/1.1" 200 35

如何在后端获取文件?

您可以将文件发布为form data,如下所示:

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'your_url',
type : 'POST',
data : formData,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
success : function(data) {
# success
}
});

最新更新