在移动设备上使用<input type =“ file” capture =“” />的正确方法

时间:2018-07-10 19:06:48

标签: android html ios input mobile-browser

我正在创建一个带有文件上传按钮的表单,用于上传视频。一切都能在Web上正常运行,但是在移动设备(Android和iOS)上却遇到了问题。

在iOS上

文件上传按钮直接打开了设备的相机,没有任何选项可从“画廊/照片”中进行选择。虽然,录制的视频已成功上传。

在Android上

在这里情况有所不同。上载按钮显示所有选项,例如“相机”,“便携式摄像机”,“文件”等,但是选择Camcorder后,该文件无法上载到服务器。虽然,从Gallery拍摄的视频已成功上传。

我的文件上传按钮

<input type="file" class="form-input-file" id="input-video-file" accept="video/mp4,video/x-m4v,video/quicktime,video/*" capture="capture">

P.S。 :我也尝试过使用capturecapture="camcorder",但是没有运气。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

捕获属性需要 2 个可能的字符串

  • 用户
  • 环境

如果输入类型是'file',它告诉浏览器捕获一个新文件,类型由'accept'属性指定,使用指向用户或远离用户的麦克风或摄像头,如果有是一个。

例如,使用外向设备捕获新的视频文件。

<input type="file" id="video-file" capture="environment" accept="video/*" />

使用面向用户的设备捕获新的视频文件。

<input type="file" id="video-file" capture="user" accept="video/*" />

要捕获现有的视频文件,请删除“捕获”和“接受”属性,让用户导航到他们想要的文件。

    <input type="file" id="video-file" />