我遇到了this answer个非常棒的人:

在iPhone iOS6和Android ICS更高版本中,HTML5具有以下功能 允许您从设备拍照的标签:

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

捕获可以获取相机、摄像机和音频等值.

有没有可能更进一步,使用某种类型的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);

Html相关问答推荐

Flexbox响应式图像不会缩小

CSS属性不适用于IOS设备

Chrome和Safari浏览器中的CSS3动画不同

如何让QML`Text`元素内的链接在悬停时显示鼠标指针?

在FlexBox中将div拉伸到父div的完全高度

创建带有弯曲边框的水平时间线

是否可以只使用css而不使用像&;nbsp;这样的HTML符号来实现断字而不换行空格?

如何使用*ngFor将模板从父级传递到子级

有没有一种方法可以提高代码中tailwind 类名的可读性?

排列卡片时遇到困难

使单行路径的 svg 填充父级的 100% 宽度

网页设计不适合移动设备

css 网格创建空行和列

两个span,一个在div居中,好像没有另一个,另一个在右边

如何在没有容器的情况下沿基线将 div 中的元素居中?

水平对齐两列中的两个按钮 同一级别

右对齐 bootstrap 导航项而不是下拉菜单

Tailwind CSS 复选框样式不起作用

变换元素以适应高度(Angular,SCSS)

Bootstrap 5 网格问题,div 向下转义