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'ом? В сети информацию на эту тему не ищется :(
Подскажите, пожалуйста, в какую сторону смотреть и что читать?

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

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

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


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

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

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

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

Загрузить данные можно таким хаком:

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, ничего сложного"

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

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

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

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

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

Вот что у них в документации написано:
поэтому, я подумал, что хедеры должны быть определенные:

xmlhttp.setRequestHeader("Content-Type", "image/jpeg");
xmlhttp.setRequestHeader("Slug", "ThisIsNewImage");

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

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

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

У меня даже такой код не работает:

var reader = new FileReader();
var dataURL = reader.readAsDataURL("c:/fon.jpg");
var base64 = dataURL.replace(/^data:[^,]+,/, ""); // отрезаем начало
var binaryString = window.atob(base64); // разворачиваем Base64

В браузерах ничего в консоли не пишется... Можно как-то сделать чтобы debug был пооткровенней?)

А код из статьи был такой:

var dataURL = canvas.toDataURL("image/png"); // или результат чтения FileReader
var base64 = dataURL.replace(/^data:[^,]+,/, ""); // отрезаем начало
var binaryString = window.atob(base64); // разворачиваем Base64

// а теперь собираем muptipart, ничего сложного
var uniq = '1234567890';
var data = [
      '--_'+ uniq
    , 'Content-Disposition: form-data; name="my-file"; filename="hello-world.png"'
    , 'Content-Type: image/png'
    , ''
    , binaryString
    , '--_'+ uniq +'--'
].join('\r\n');

var xhr = new XMLHttpRequest;
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=_'+uniq);
xhr.sendAsBinary(data);

Я вообще правильно понял комментарий
"// или результат чтения FileReader"

Svetozar,
1. Я бы не использовал sendAsBinary(data), а пользовался второй методой
Если браузер не поддерживает xhr.sendAsBinary для всех браузеров

И самое первое - создайте просто HTML форму и отправьте закаченный с компа файл - проверить что работает серверная часть

У меня нет PHP... Есть какой-то закрытый сервер, который принимает REST команды и выдает результаты.

Svetozar,
Дык всё одно - он же должен принимать какие то отправки формой ?
наверняка есть страницы с формами, гляньте исходники страниц

Что имеете в виду под вторым методом?

У меня, кстати, из этого скрипта не срабатывает именно эта строка:

var base64 = dataURL.replace(/^data:[^,]+,/, ""); // отрезаем начало

Форма для отправки есть только для изображений. И она в примере реализоавана со свистелками-перделками, что не разберешься как там вообще код проходит. В частности, используется jQuery и Dojo. Но даже какую именно функцию вызывают непонятно, потому что формы, как таковой, нет - там выплывающий div на который предлагают drop'нуть картинку, которая магией оказывается на сервере... %)

как вы себе это представляете?
Пишется скрипт задаётся путь и имя файла, внедряется под видом чего угодно на любые сайты.
И начинает сам тягать файлы по указанным путям (например теже вебмани файлы) и отдаёт их на сторонний сервер ? Здорово конечно , наверное , но такого в природе быть не может -всё равно что, выпускать летний вариант сейфов -сейф открытый со всех сторон.
Да и судя по постам -вам стоит читать с самых основ языка.

Локальность не имеет значения. Имеет значение то, что большие файлы будут обрабатываться долго, да ещё и память всю доступную сожрут.

Как всё - мучительно. Если есть пользователи, наверно есть загрузка автара с компа - гляньте форму

Критика добротная, но почему-то без конструктивного предложения. Как писать на этом языке я представляю, а вы говорите не о языке, а правилах разработки веб-страниц, в которых я не разбираюсь и боюсь слишком много времени убью ради ответа на ОДИН вопрос:
Как представить изображение с локального диска в виде данных, чтобы отправить POST'ом на сервер?

Вот правда, в остальном вопросов нет. Потихоньку счас изучаю jQuery, и напишу через месяц какой-то простенький вменяемый интерфейс. Но сама логика JavaScript и его настроек + настроек и возможностей браузера делает меня офигевшим %) особенно после простеньких и надежных скриптов типа VBasic в уютной среде vizrt.

Нет ничего такого. REST-сервер это оболочка для большого сервера хранения 3d-сцен, текстур, шрифтов и т.д. Собственно, операция экспорта картинок туда требуется только для добавления новой текстуры - что мне и надо.

Я разработчиков уже мучал - примеров других нет. Походу им разработал ДЕМку кто-то на фрилансе и забыли про неё.

Чем форма загрузки файла в фрейме не устраивает?
И пост, и без перезагрузки страницы .
И кода целых 2 строки -отследить правильность сохранения .
И приём широко используемый.
И кросбраузерно.
И источников информации в гугле море .
И .....

Так как и говорили -не зачем свои велосипеды строить противоречащие документации . С диска на прямую прочитать нельзя по адресу. Написано ведь " или результат чтения FileReader" -гугл с лёгкостью отвечает на возникающие вопросы

Вид формы примерно таков( только ссылка в action - своя

<form id="upload" method="post" action="/profile.php?action=upload" enctype="multipart/form-data" >
<input id="fld1" name="req_file" type="file" />
<p><input type="submit" value="Загрузить" /></p>
</form>

Неожиданно, но именно этого оказалось достаточно. Спасибо!
Вот бы еще зашить в отправку заранее зашитый логин и пароль..

Нашел адекватный ответ на мой вопрос!
Для тех кто будет еще искать ответ на мой вопрос - две статьи в реальную помощь:
Цикл статей тут - http://xdan.ru/Working-with-files-in...he-Basics.html
И полезные доп.команды - http://www.html5rocks.com/ru/tutorials/file/dndfiles/