#javascript #django #ajax #django-rest-framework #jquery-upload-file-plugin
#javascript #django #ajax #django-rest-framework #jquery-загрузить-файл-плагин
Вопрос:
Я пытаюсь загрузить файл с помощью события 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 amp;amp; 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) amp;amp; !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
Как я могу получить файл на серверной части?
Ответ №1:
Вы можете опубликовать файлы 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
}
});