ILoveYAnny
@ILoveYAnny

Как обеспечить корректную загрузку изображений из FormData через Ajax/XMLHttpRequest?

Здравствуйте. Проблема следующая, сделал страницу для загрузки изображений на сервер, всё работает отлично. Я хочу на главной странице подгрузить эту форму через 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 объектов)
  • Вопрос задан
  • 1529 просмотров
Пригласить эксперта
Ответы на вопрос 2
gzhegow
@gzhegow
Думал, стану умнее, когда адаптируюсь, но нет
А чем не нравится jQuery с его готовыми решениями? не хочется 100кбайт подгружать?
гугл ставит 80 баллов скорости сайту с 10летней мусоркой в которой только скриптов килобайтов на 500, просто они грамотно собраны в один файл.

скорость загрузки? нет, я думаю то что думают поисковые системы - важнее, они же будут сайт вверх двигать. если гугл ставит 80, яндексу как водится - вообще наплевать, он про другое, майкрософтом мало народу пользуется, в общем - используете то что проще в плане делать, нежели пытаясь на нативном сделать и замучаться
Ответ написан
sanchezzzhak
@sanchezzzhak
Ля ля ля...
https://blueimp.github.io/jQuery-File-Upload/
я бы не стал самим пилить, когда есть готовое решение, которое можно кастомизировать + оттестировано бери да юзай.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы