Работа с загруженными файлами

[Set_Mortensen]

Здравствуйте! Тема такая: добавляем товар. Реализуем примерно так.
<input type='file'> выбираем файл с компьютера. В поле <input type='text'> пишем название товара. Нажимаем на <input type='submit'> и что происходит дальше??
По какому адресу будет доступна загруженная картинка? Как мне потом в другом месте DOM отобразить эту картинку (какой scr нужно указывать для img чтобы отобразить загруженную картинку)?
P.S. Хочу чтобы эта загруженная картинка отображалась на странице и после обновления страницы, тоесть её URL запишим в некий JSON файл, из содержимого которого будут показываться все img на странице.

[laimas]

что происходит дальше?

Будет оправлена форма серверному скрипту указанному в атрибуте action формы.

По какому адресу будет доступна загруженная картинка?

По тому, куда запишет изображение серверный сценарий.

[Set_Mortensen]

тоесть надо знать NodeJS? или как сделать серверный скрипт?
можно лёгенький пример?

[laimas]

тоесть надо знать NodeJS?

Серверным скриптом может быть не только NodeJS, но и PHP, Perl, Python, Ruby, ASP.NET, Java, ... Так что трудно сказать чего вам именно нужно. Если сами хотите сделать выбор, а не использовать тот язык, который будет предлагать вам хост - выбирайте, изучайте.

В РНР все просто - файлы пришедшие формой загружаются во временную папку как временные файлы, описание которых содержит суперглобальный массив $_FILES, и обрабатывая который перемещают загруженные файлы в определенный каталог. Изображения можно при этом и обработать, например библиотекой GD или, если имеется на сервере, ImageMagick.

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

[warren buffet]

и что происходит дальше?

Дальше браузер открывает соединение с сервером точно так же, как он это делает при запросе веб-страницы по введенному адресу. Пожав руки сервер с браузером начинают обмен заголовками и данными.

Адресом запроса по умолчанию является текущий. То есть если в action="" то пойдет на тот адрес, который в строке браузера. Если указано явно - по указанному.

По указанному адресу должен быть заранее подготовленный скрипт или программа, которые понимают что пришло и что с этим делать.

ТС, с твоим уровнем проще скачать готовое или заказать, если у тебя вообще сервер есть.

[Set_Mortensen]

я только учусь. Никак не освою XMLHttpRequest особенно POST метод...сам то я не тупой, но тут чёто недоходит
Форма обязательна? я не могу сделать к примеру так?

var xmlhttp = new XMLHttpRequest();
var b = {"name":"Vasya","age":98};
xmlhttp.open('POST', 'user.json', false);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(b);

чтобы в имеющийся JSON файл добавить объект b

[warren buffet]

Для метода post форма не обязательна, но без нее задолбаешься все собирать, а как там без формы с файлами обходились я даже проверять не стану. Просто сделай новый объект формы и втыкай туда чего угодно.

Например

var
el=D.getElementById("import-file"),
x = new XMLHttpRequest(),
f = new FormData();
f.append(el.name, el.files[0], el.value);
x.open("POST",url);
x.onreadystatechange=function(){/* и тут уже калбек  */
x.setRequestHeader("X-Requested-With","XMLHttpRequest");
x.send(f);

С текстовыми данными такой же аппенд, почитай про FormData

PS Напомню что контекст был закачать файло.

[Set_Mortensen]

всем спасибо. суть понял. осталось выучить backend

[laimas]

суть понял. осталось выучить backend

Не совсем.

То что по последнему вопросу - форма не обязательна.
Не зная Node.js ничего не могу сказать про передачу непосредственно объекта, но что-то подсказывает, что что-то не так.

Но дело даже не в этом. Можно изучать любой язык, знать его безупречно, но вот воспользоваться им не уметь. Изучая язык, учитесь сразу ставить задачи, в уже в них находить пути решения используя язык. К примеру (о чем я не стал говорить сразу):

Хочу чтобы эта загруженная картинка отображалась на странице и после обновления страницы, тоесть её URL запишим в некий JSON файл, из содержимого которого будут показываться все img на странице. - выделенное красным совсем не нужно. Если понимать задачу, а значит планировать и понимать хранение данных, то "этого не нужно" обязательно станет понятным. Просто попробуйте представить все это мысленно, не вникая в языки программирования.

[warren buffet]

laimas, хватит народ пугать. Записать файл на сервер через веб-интерфейс - это самое интересное с чем сталкивается начинающий кодер. Всякие там текстики - это не впечатляет, а когда закачал файл и он бамц и появился на публике как тумба и она еще и открывается - это прикольно.

На всякий случай пример транспозинга на все случаи жизни переменной с файлами.

$files=array();

foreach($_FILES as $field=>$values)
	foreach($values as $index=>$value)
		if(is_array($value))
			foreach($value as $i=>$v)
				$files[$index][$i][$field]=$v;
		else
			$files[$index][0][$field]=$value;