Как через форму загрузить изображение, налету закодированное в Base64?

Question

[d'Ivan]

Имеется форма, например

<form enctype="multipart/form-data" method="post" name="upload_form" action="/upload_handler">
	<input id="fileinput" type="file" /><br>
	<input type="submit" value="Upload">
</form>

Сервер принимает и хранит Base64 изображения.
Подскажите как можно отправить на сервер контент изображения, налету закодированное в Base64?

Answer 1

[bqio]

Если не используете ajax, то вместо id должен быть атрибут name.
$base64img = base64_encode($_POST['fileinput']);

Answer 2

[ThunderCat]

смотрите в сторону файлового апи в жс - FileReader(), вам подойдет readAsDataURL(). Как вариант на инпут файл вешается ончейндж, и из файллиста все пихается в валуе какого-то хидден инпута. Все, на стороне сервера готовый бэйз64 стринг.

Comments

[d'Ivan]

То есть без дополнительного скрытого поля напрямую значение поля поменять не получится? Как бы сымитировать выбранный файл?

[ThunderCat]

Роман Мирр, ну почему же, для аякса можно это значение хранить в переменной и передать как объект (на стороне сервера получите обычную переменную POST), а для формы отправляемой методом пост, в смысле использовать сам инпут - нет, файловый инпут позволяет ТОЛЬКО читать данные, писать удалять из него ничего нельзя.

[d'Ivan]

ThunderCat, насколько я понимаю, поле ввода файлового типа позволяет браузеру отправлять файл в качестве приложения (attachment) к телу HTML (multipart content). Следовательно, сымитировать такое же поведение можно только если контент изображения, закодированный в Base64, будет находиться там же.
В случае же отправки через скрытые поля формы содержание будет отправлено в самом body формы при POST, закодированное в application/x-www-form-urlencoded.
JavaScript разве позволяет работать данными в приложениях?

[ThunderCat]

JavaScript разве позволяет работать данными в приложениях?

да, вот так например, в смысле в режиме чтения, в принципе и манипулировать данными никто не мешает, просто в файл инпут уже в этом не участвует. Так работают все загрузчики файлов аяксом, только там еще FormData() используется, для создания объекта формы.
Вот только вчера добил решение отправки произвольного заданного числа файлов с возможностью добавления /удаления файлов из списка загрузки, что не возможно сделать через обычный файл инпут, если интересно.

Answer 3

[krypt3r]

Извращенный вариант

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="" />

Comments

[d'Ivan]

Тег img не предназначен для отправки данных на сервер, не так ли?