1. ホーム
  2. javascript

[解決済み] フォーム入力でカメラにアクセスし、Webアプリで写真を即座にアップロードする

2023-02-06 09:55:34

質問

私は この回答 は見事です。

<ブロッククオート

iPhone iOS6 と Android ICS 以降の HTML5 では、次のような タグがあり、デバイスから写真を撮影することができます。

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

Captureはカメラ、カムコーダー、オーディオのような値を取ることができます。

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

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

ユーザーがフォームの送信ボタンをクリックするのを待たずに、この写真をすぐにアップロードするには何が必要でしょうか?

どのように解決するのですか?

これは本当に簡単で、ファイル入力の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);