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

Я наткнулся на этот ответ, который блистателен:

В iPhone iOS6 и Android ICS и далее, HTML5 имеет следующие который позволяет делать снимки с вашего устройства:
    <input type="file" accept="image/*" capture="camera">
Захват может принимать значения, такие как камера, видеокамера и аудио.

Можно ли сделать еще один шаг, используя ajax, чтобы сразу загрузить фотографию после ее принятия?

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

Что нужно для немедленной загрузки этой фотографии, а не для того, чтобы пользователь нажал кнопку "Отправить" формы?

Ответы

Ответ 1

Это действительно легко сделать, просто отправьте файл с помощью запроса XHR внутри файла ввода в обработчик обмена.

<input id="myFileInput" type="file" accept="image/*;capture=camera">

var myInput = document.getElementById('myFileInput');

function sendPic() {
    var file = myInput.files[0];

    // Send file here either by adding it to a `FormData` object 
    // and sending that via XHR, or by simply passing the file into 
    // the `send` method of an XHR instance.
}

myInput.addEventListener('change', sendPic, false);