使用表单输入来访问相机并立即使用网络应用上传照片 [英] Using form input to access camera and immediately upload photos using web app

问题描述

我遇到了这个答案，这很棒：

在iPhone iOS6和Android ICS之后，HTML5具有以下
标签，您可以从设备拍摄照片：

 < input type =fileaccept =image / *capture =camera> 
  

拍摄可以拍摄相机，摄像机和音频等数据。
< blockquote>

是否有可能通过使用某种类型的jax来立即上传照片后再采取这一步？

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

这张照片需要立即上传而不是等待用户点击表单的提交按钮？

解决方案

这很简单，只需通过XHR发送文件请求文件输入的onchange处理程序中。

 < input id =myFileInputtype =fileaccept =image / *;捕获=相机> 
 
 var myInput = document.getElementById（'myFileInput'）; 
 
函数sendPic（）{
 var file = myInput.files [0]; 
 
 //通过将文件添加到FormData对象
 //并通过XHR发送，或者简单地将文件传入
中，发送XHR实例的方法。 
} 
 
 myInput.addEventListener（'change'，sendPic，false）; 
  

I came across this answer which 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.

Is it possible to take this one step further by using ajax of some kind to immediately upload photo after its taken?

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?

解决方案

It's really easy to do this, simply send the file via an XHR request inside of the file input's onchange handler.

<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);

这篇关于使用表单输入来访问相机并立即使用网络应用上传照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！