根据点击的label为file input动态设置capture属性的实现咨询

算力阿峰

2026-9-27

实现方案

你已经在代码中使用了jQuery，可以直接通过给两个label绑定点击事件，动态修改input的属性即可，实现逻辑非常简单：

方法1：给label增加区分类（可读性更高，推荐）

首先修改你的HTML中两个label的部分，增加自定义类做区分：

<!-- 第一个label，普通上传 -->
<label for="file" class="upload-button upload-normal"><i class="far fa-file-image"></i></label>
<!-- 第二个label，调用前置摄像头 -->
<label for="file" class="upload-button upload-camera"><i class="fas fa-angry"></i></label>

然后增加以下JS代码即可：

// 普通上传：移除capture属性
$('.upload-normal').on('click', function() {
  $('#file').removeAttr('capture');
});

// 摄像头上传：添加capture="user"属性
$('.upload-camera').on('click', function() {
  $('#file').attr('capture', 'user');
});

方法2：无需修改现有HTML，直接按索引选择label

如果不想改动原有HTML结构，也可以直接通过索引匹配两个label：

// 第一个label（索引为0）
$('.upload-button:eq(0)').on('click', function() {
  $('#file').removeAttr('capture');
});

// 第二个label（索引为1）
$('.upload-button:eq(1)').on('click', function() {
  $('#file').attr('capture', 'user');
});