Html 使用表单输入访问相机并使用网络应用程序立即上传照片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17241707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using form input to access camera and immediately upload photos using web app
提问by micah
I came across this answerwhich is brilliant:
In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:
<input type="file" accept="image/*" capture="camera">Capture can take values like camera, camcorder and audio.
在 iPhone iOS6 和 Android ICS 之后，HTML5 具有以下标签，它允许您从您的设备拍摄照片：
<input type="file" accept="image/*" capture="camera">Capture 可以采用相机、摄像机和音频等值。
Is it possible to take this one step further by using ajax of some kind to immediately upload photo after its taken?
是否可以通过使用某种ajax在拍摄后立即上传照片来更进一步？
For example, using my phone, once I tap on the input, it then opens the camera which will immediately allow me to take a photo and save it. When I save it to camera, it's then listed by the input button as the file to upload.
例如，使用我的手机，一旦我点击输入，它就会打开相机，这将立即让我拍照并保存它。当我将它保存到相机时，它会被输入按钮列为要上传的文件。
What would it take for this photo to be immediately uploaded instead of waiting for the user to click the Submit button of the form?
立即上传这张照片而不是等待用户单击表单的提交按钮需要什么？
回答by Ray Nicholus
It's really easy to do this, simply send the file via an XHR request inside of the file input's onchange handler.
这样做真的很容易，只需通过文件输入的 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);
