使用表单输入访问摄像头，并使用web app立即上传照片

Question

我偶然发现了一个非常聪明的答案：

在iPhoneiOS6和从Android ICS开始，HTML5具有以下标签，允许您从设备上拍摄照片：

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

捕捉可以采取的值，如相机，摄像机和音频。

有没有可能更进一步，在拍摄完照片后立即使用ajax上传照片？

例如，使用我的手机，一旦我点击输入，它就会打开相机，相机会立即允许我拍照并保存它。当我把它保存到相机时，它会被输入按钮列为要上传的文件。

如何才能立即上传此照片，而不是等待用户单击表单的提交按钮？

Answer 1

实现这一点非常简单，只需在文件输入的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);