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

Question

[ILoveYAnny]

Здравствуйте. Проблема следующая, сделал страницу для загрузки изображений на сервер, всё работает отлично. Я хочу на главной странице подгрузить эту форму через 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 объектов)

Answer 1

[Григорий Васильков]

А чем не нравится jQuery с его готовыми решениями? не хочется 100кбайт подгружать?
гугл ставит 80 баллов скорости сайту с 10летней мусоркой в которой только скриптов килобайтов на 500, просто они грамотно собраны в один файл.

скорость загрузки? нет, я думаю то что думают поисковые системы - важнее, они же будут сайт вверх двигать. если гугл ставит 80, яндексу как водится - вообще наплевать, он про другое, майкрософтом мало народу пользуется, в общем - используете то что проще в плане делать, нежели пытаясь на нативном сделать и замучаться

Comments

[ILoveYAnny]

Вы точно в тот вопрос ответ написали ?)

[Григорий Васильков]

извините, невнимательно отнесся к тексту вопроса.
вы ведь совсем пхп не используете? что на серверной стороне?

[Григорий Васильков]

пс. мне кажется что сам файл не нужно оборачивать в json и blob, если не разберетесь - напишите в вайбер 375 33 656 26 80, попробуем что-то сделать

[Григорий Васильков]

попробуйте вот так еще

<script id="jquery-async" async src="//code.jquery.com/jquery-1.12.0.min.js"></script>
  <script>
    document.getElementById("jquery-async").addEventListener("load", function load(event) {
      window.removeEventListener("load", load, false);
      init();
    }, false);
    function init() {
      $.noConflict();
      (function ($, App) {
        var fileformSend = function () {
          var $input = $("input[type='file']");
          var filedata = $input.prop('files')[0];
          var filename = $input.prop('files')[0].fileName;

          var formData = new FormData();
          formData.append("filename", filename);
          formData.append('filedata', filedata);

          $.ajax({
            url: "/load.php",
            type: "POST",
            data: formData,
            dataType: 'json',
            processData: false,  // tell jQuery not to process the data
            contentType: false   // tell jQuery not to set contentType
          }).done(function (response) {
            response.status || console.error('Status: 0');
            console.log(response);
          });
        };
        App.fileformSend = fileformSend;
      })(jQuery, App = window.App || {});
    };
  </script>

[ILoveYAnny]

Григорий Васильков: Всё верно, я вчера нашёл аналогичное решение) Проблема была в том, что я передавал Валью инпута а не сам файл. Блоб я делал для передачи параметра filename, но он и так передаётся - если всё правильно поместить файл :)

var newslide = file.prop('files')[0];
formData.append('image', newslide);

И все параметры передаются замечательно, без всяких Blob объектов)

[Григорий Васильков]

Ну тады хорошо что хорошо кончается!

Answer 2

[Александр N++]

https://blueimp.github.io/jQuery-File-Upload/
я бы не стал самим пилить, когда есть готовое решение, которое можно кастомизировать + оттестировано бери да юзай.

Comments

[ILoveYAnny]

На PHP да, у меня Django + с Питоном я недавно только познакомился, мне проще добить свою форму на JS, чем с серверной частью мучаться. Темболее там на сервере принимающая сторона уже написана. Мне надо просто указать урл и настроить правильный заголовки..

[Александр N++]

там не только на пхп серверная часть

прием файлов на сервере также как и обычная форма.

на php это $_FILES
в Django также как и обычная форма
https://docs.djangoproject.com/es/1.9/topics/http/...

[ILoveYAnny]

Александр N++: Я все это организовал и всё прекрасно работает. Я лишь хочу воспользоваться этой формой подгрузив её через Аякс. И проблема в том, что изображений приходят биты, не открываются (