Здравствуйте. Проблема следующая, сделал страницу для загрузки изображений на сервер, всё работает отлично. Я хочу на главной странице подгрузить эту форму через Ajax и загрузить изображение. Для данной цели использую FormData, так же мне вместе с фалом необходимо передать параметр filename и content-type, для этой цели использую объект Blob, всё работает да вот только на сервер приходит битая картинка, и не открывается. Скачивал с сервера, открыл у себя - так же не открывается. При этом в той форме, которая в натуральном окне - всё отлично.
Код FormData
var formData = new FormData();
formData.append("csrfmiddlewaretoken", token);
formData.append("title", title);
if(centercheck == true) {
var center = $("#modalwindow .post-form #id_center").val();
formData.append("center", center);
}
if(aligncheck == true) {
var align = $("#modalwindow .post-form #id_align_title_in_image").val();
formData.append("align_title_in_image", align);
}
formData.append("slug", slug);
formData.append("template", template);
formData.append('image', new Blob([JSON.stringify({
file: file
})], {
type: "image/jpeg"
}), namefile);
Форму пробовал отправлять и через XMLHttpRequest и через Ajax
XMLHttpRequest
var request = new XMLHttpRequest();
request.open("POST", "/add_slide.html");
request.send(formData);
Ajax
$.ajax({
url: "/add_slide.html",
type: "POST",
data: formData,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
});
Ответ сервера
В Форме
------WebKitFormBoundarydtrxGZFX5bbTMToN
Content-Disposition: form-data; name="image"; filename="astanabuild.jpg"
Content-Type: image/jpeg
------WebKitFormBoundarydtrxGZFX5bbTMToN--
В отдельном окне
------WebKitFormBoundarye24VTHyCOKKJ8d28
Content-Disposition: form-data; name="image"; filename="astanabuild.jpg"
Content-Type: image/jpeg
------WebKitFormBoundarye24VTHyCOKKJ8d28--
В общем весь ответ идентичен, единственную разницу заметил в графе Request Headers
В окне с Ajax
Accept:*/*
В отдельном окне
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Помогите пожалуйста, не знаю в какую сторону копать. Примеров не нагуглил. Единственная мысль, что фотографии через JSON (или вообще в Blob объекте) не передаются, но я и отдельно выносил файл через formData.append("image","file") - ситуация такая же..
UPD: Проблема обнаружена, в изображении содержится не изображение, а {"file":"C:\\fakepath\\astanabuild.jpg"} , всё таки проблем в том - что передаётся не изображение, а данные в формате JSON
UPD2: Решение найдено. Проблема была в том, что я передавал Валью инпута а не сам файл. Блоб я делал для передачи параметра filename, но он и так передаётся - если правильно поместить файл :)
var file = $("#modalwindow .post-form #id_image")
var newslide = file.prop('files')[0];
formData.append('image', newslide);
И все параметры передаются замечательно, без всяких Blob объектов)
