Загрузки картинок в реальном времени?

Question

[Иван Антонов]

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

Answer 1

[Юрий Петрашевич]

<input type="file" onchange="setPhoto(this)" />

function setPhoto(elem) {
	var fd = new FormData;
	fd.append('file', $(elem).prop('files')[0]);

	$.ajax({
		url: "урл на пхп обработчик",
		data: fd,
		processData: false,
		contentType: false,
		type: 'POST',
		success: function (a) {
			$('.container-photo img').attr('src', a.data.photo);
		}
	});
}

простенький вариант, ответ сервера должен быть в json и содержать имя загрежнной картинки

Comments

[Иван Антонов]

а возможно ли загрузить во временную папку. Если форму отменить файлы останутся.

[Юрий Петрашевич]

Иван Антонов: копируйте в любую папку, а по крону периодически чистите ее в зависимости от наличие строк в БД

[Иван Антонов]

Юрий Петрашевич: Да хороший совет.
А как показать привью фото которое еще не загрузилось, например как здесь https://realty.yandex.ru/add

[Юрий Петрашевич]

Иван Антонов: используйте эту библиотеку blueimp.github.io/jQuery-File-Upload

[Иван Антонов]

Юрий Петрашевич: библиотека это круто, но хотелось бы знать как это работает )

[Юрий Петрашевич]

Иван Антонов: ну так разберите его по частям :) Я доставал из этого плагина именно функционал показа превьюшки, там нет ничего сложного.