web-dev-qa-db-ja.com

フォーム入力を使用してカメラにアクセスし、すぐにWebアプリを使用して写真をアップロードする

私は この答え に出くわしました。

IPhone iOS6およびAndroid ICS以降では、HTML5には次のタグがあり、デバイスから写真を撮影できます。

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

キャプチャは、カメラ、カムコーダー、オーディオなどの値を取ることができます。

何らかの種類のajaxを使用して、撮影後すぐに写真をアップロードすることで、これをさらに一歩進めることは可能ですか？

たとえば、携帯電話を使用して入力をタップすると、カメラが開き、すぐに写真を撮って保存できるようになります。カメラに保存すると、アップロードするファイルとして入力ボタンにリストされます。

ユーザーがフォームの[送信]ボタンをクリックするのを待つのではなく、この写真をすぐにアップロードするには何が必要ですか？

javascripthtml5formsweb-applicationsmobile
70
micah

これは非常に簡単です。ファイル入力のonchangeハンドラ内で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);
85
Ray Nicholus