Загрузка изображений в Django с помощью Ajax
Этот вопрос задавался много раз. И после долгих попыток я сдался.
Я пытаюсь загрузить изображение на сервер с помощью функции Ajax. Функция Ajax передает довольно много данных (я удалил ненужную часть).
Функция console.log
дает мне пустой массив. Что не так с моей функцией?
Вот HTML:
<form method="POST" id="form-create" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" id="myImg" name="myImg">
</form>
Это сценарий
$(document).on('submit', '#form-create', function (e) {
e.preventDefault()
var formData = new FormData();
formData.append('myIMG', $('#myIMG')[0]);
console.log(formData)
$.ajax({
type: 'POST',
cache: false,
url: "{% url 'creator:build' %}",
data: {
img:formData,
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
},
success: function (data){
if (data.msg === "Success") {
$('h4').html('It worked!');
}
if (data.msg === 'Fail') {
$('h6').html('Sorry! There was a problem...');
}
},
});
});
Вы передаете HTMLInputElement в formdata.append, вы должны передать файл
formData.append('myIMG', $('#myIMG')[0].files[0]);
Все поля, которые вы хотите отправить в теле ajax-запроса, должны быть в объекте fromdata
formData.append('csrfmiddlewaretoken', $('input[name=csrfmiddlewaretoken]').val());
При выполнении $.ajax запроса с объектом formdata вы должны передать его в качестве параметра data, а также установить processData и contentType в false
$.ajax({
type: 'POST',
cache: false,
url: "{% url 'creator:build' %}",
data: formData,
contentType: false,
processData: false,
success: function (data){
if (data.msg === "Success") {
$('h4').html('It worked!');
}
if (data.msg === 'Fail') {
$('h6').html('Sorry! There was a problem...');
}
},
});
});