Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   REST, XMLHttpRequest, закачка картинки через POST (https://javascript.ru/forum/misc/38110-rest-xmlhttprequest-zakachka-kartinki-cherez-post.html)

Svetozar 19.05.2013 20:43

REST, XMLHttpRequest, закачка картинки через POST
 
Вопрос про XMLHttpRequest — надо через web-страничку, т.е. силами JS, закачать фотографию на рабочий REST-сервис. Код сейчас выглядит так:
var xmlhttp = new getXmlHttp();
xmlhttp.open('POST', 'http://localhost/folders/root/', false, "Admin", "pass");
xmlhttp.setRequestHeader("Content-Type", "image/jpeg");
xmlhttp.setRequestHeader("Slug", "ThisIsNewImage");
data = ??? //"c:/image.jpg"
xmlhttp.send(data);

Не понимаю как представить изображение в виде данных, чтобы отправить POST'ом? В сети информацию на эту тему не ищется :(
Подскажите, пожалуйста, в какую сторону смотреть и что читать?

B@rmaley.e><e 19.05.2013 21:01

Смотреть в сторону FileAPI, XHR2

Читать спецификации, можно ещё это:
http://javascript.ru/blog/Brmaley-ee/FileAPI — статья тысячелетней давности, всё давно поменялось, но общее представление даёт. А ещё в конце имеются какие-то ссылки.
http://javascript.ru/blog/Jason-Bour...mi-cherez-AJAX

Без FileAPI Вы даже содержимое файла получить не сможете, так что и отправлять будет нечего. С помощью XHR2 можно их послать multipart запросом, т.е. так, будто он был отправлен из формы. Простым XHR'ом так не получится, придётся писать отдельную логику обработки AJAX загрузки.


Но проще всего файл средствами JS загружать через скрытые фреймы.

cyber 19.05.2013 21:04

Цитата:

Сообщение от Svetozar
В сети информацию на эту тему не ищется

правда?
сначала зайдите сюда

а потом сюда http://learn.javascript.ru/xhr-forms

nerv_ 20.05.2013 01:15

Цитата:

Сообщение от B@rmaley.e><e
статья тысячелетней давности, всё давно поменялось

обновить нет желания? :)

Deff 20.05.2013 02:39

Загрузить данные можно таким хаком:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.onreadystatechange = function(e) {
if (this.readyState == 4 && this.status == 200) {
var binaryString = this.responseText;
alert(binaryString.length);
}}; xhr.send();

Для отправки нун преобразовать в двоичный блоб и отправка вручную собранным muptipart

Может помочь статья:http://habrahabr.ru/company/mailru/blog/159587/
Читать стоит отсель "// а теперь собираем muptipart, ничего сложного"

quirksmode 20.05.2013 03:46

методом пут отправляй

B@rmaley.e><e 20.05.2013 07:24

Цитата:

Сообщение от nerv_
обновить нет желания?

Было бы неплохо, но это надо перечитать спеки, посмотреть на браузерную поддержку (читай — проверь во всех браузерах), а у меня на это нет времени. Может быть, как-нибудь потом.

Цитата:

Сообщение от Deff
Для отправки нун преобразовать в двоичный блоб и отправка вручную собранным muptipart

Лучше пользоваться FormData. Для того, чтобы отправить само тело файла, нужно его сначала прочитать, а он может быть большой. С другой стороны, multipart разрешает отправку запроса "кусками", чем и должен пользоваться FormData.

Deff 20.05.2013 14:07

B@rmaley.e><e,
:) Ну пишем обычно про то, чем занимались, - таскал картинки иконок из гугла, по поисковым запросам

Svetozar 20.05.2013 14:26

Спасибо за ответы!
Буду читать и пробовать. Поймите еще меня правильно - я пользовался поисковиками, но как правильно задать поисковый запрос знают только опытные програмеры, а я лишь должен сейчас написать один функционал - я не сижу в JS днями-ночи :)
Все статьи пишут рецепты, а мне явно каких-то базовых знаний не хватает. Еще, моя задача не типичная для массы сайтов: на работе есть REST-веб-сервис, он как-то там работает - это закрытый код. Но через curl-консоль все проверяется, 100% рабочее.

Вот что у них в документации написано:
Код:

POST:
To create an image with specified compression level the client can add
the uri parameter compression when posting to the folder collection uri.
A curl example of POST of an image with specified compression level
DXT1 in the specified folder(uuid):

curl --request POST ttp://127.0.0.1/folder/49ad30fb-036a-47c7-b098-cf8472ad24eb/?compression=DXT1&name=current_file_name --data-binary @image.jpeg --header "Content-Type: image/jpeg"

поэтому, я подумал, что хедеры должны быть определенные:
xmlhttp.setRequestHeader("Content-Type", "image/jpeg");
xmlhttp.setRequestHeader("Slug", "ThisIsNewImage");


Мне неважно загружать частями или полностью. Сервера полностью локальные - можно целиком и пачками.

Я не уверен, можно ли через FormData отослать чистый файл с только требуемыми заголовками?

Deff 20.05.2013 14:36

Svetozar,
ну FormData формирует такой же запрос как и реальная форма...
Если Ваш PHP сможет обрабатывать запрос от реальной тестовой формы, значит и от FormData аналогично


Часовой пояс GMT +3, время: 11:54.