使用表单输入访问相机并使用Web应用程序立即上传照片

时间:2013-06-21 18:09:40

标签: javascript html5 forms web-applications mobile

我遇到了this answer,这很棒:

  

在iPhone iOS6和Android ICS之后,HTML5具有以下功能   标签,允许您从您的设备拍摄照片:

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

Capture可以采用相机,摄像机和音频等值。

是否可以通过使用某种类型的jj来进一步上传照片?

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

如果要立即上传此照片而不是等待用户点击表单的“提交”按钮,该怎么办?

1 个答案:

答案 0 :(得分:84)

执行此操作非常简单,只需通过文件输入的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);