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

88

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

В iPhone iOS6 и начиная с Android ICS в HTML5 есть следующий тег, который позволяет делать снимки с вашего устройства:

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

Захват может принимать такие значения, как камера, видеокамера и звук.

Можно ли сделать еще один шаг вперед, используя какой-либо ajax для немедленной загрузки фотографии после ее съемки?

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

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

мика
источник
1
Что уже пробовали? Что вы поставили в тупик?
Marcin
Если вас интересуют сторонние элементы управления, вы можете рассмотреть Kendo UI demos.kendoui.com/web/upload/api.html
HaBo
1
@Marcin Я никогда не был силен в javascript, поэтому не знал, что даже попробовать. То, что я пытаюсь воспроизвести, - это встроенная функция приложения, в которой фотография сразу же загружается в службу или на удаленный сервер без дополнительных действий после съемки с помощью камеры.
micah

Ответы:

103

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

<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);
Рэй Николус
источник
1
Спасибо за этот ответ. Итак, этот прослушиватель событий наблюдает за изменением ввода # myFileInput, зная, когда фотография находится в очереди на загрузку? А затем, я полагаю, он выполнит функцию sendPic с объектом FormData, автоматически загрузив фотографию? Я понимаю, что такое XHR на очень высоком уровне. Я правильно понял?
micah
Слушатель событий вызывается после того, как пользователь выбирает файл.
Ray Nicholus
То есть прослушиватель событий предлагает sendPic()немедленно загрузить файл после того, как камера сделает снимок?
micah
1
Можете ли вы указать мне правильное направление, чтобы узнать, как отправить форму через XHR?
iluvpinkerton
3
@iluvpinkerton Конечно, используйте (или посмотрите) Fine Uploader или ajax-form . Отказ от ответственности - я разработчик обеих библиотек.
Рэй Николас