根据单击的标签启用文件输入的捕获属性答案

【问题标题】：Enable capture attribute for file input depending on label clicked根据单击的标签启用文件输入的捕获属性
【发布时间】：2021-11-07 00:47:15
【问题描述】：

我有以下带有两个标签的表单：

                <form method="POST" action='/process' enctype="multipart/form-data">
                    <div>
                        <label for="file" class="upload-button"><i class="far fa-file-image"></i></label>
                        <label for="file" class="upload-button"><i class="fas fa-angry"></i></label>
                        <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" style="display: none; visibility: none;" onchange="$('form').submit();">
                    </div>
                </form>

如果单击第一个标签，我希望输入保持当前写入的状态，但如果单击第二个标签，则添加“capture="user"”属性。有没有简单的方法来实现这一点？

【问题讨论】：

给第二个label一个类，使用js/jquery抓取它，给它一个点击事件，在监听函数内部使用setAttribute()方法input标签。
如果您需要对这些步骤中的任何一个进行进一步说明，或者您想完成其他事情，请告诉我......
对不起，我不太明白——你能举个简单的例子吗？另外，这个方法会在文件上传之前发生属性变化吗？
是的，点击后属性会发生变化。你用的是 JS 还是 jQuery？
我正在使用 jQuery

标签： javascript html css input

【解决方案1】：

首先，给第二个标签一个唯一的类：

<label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>

然后，选择它，并为其添加一个单击事件侦听器，该侦听器使用attr() 方法为<input /> 标记提供"capture"="user" 属性：

$(".second").click(function() {
  $("input").attr("capture", "user");
});

运行示例：检查输入标签以查看更改

$(".second").click(function() {
  $("input").attr("capture", "user");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<form method="POST" action='/process' enctype="multipart/form-data">
  <div>
    <label for="file" class="upload-button"><i class="far fa-file-image"></i></label>
    <label for="file" class="upload-button second"><i class="fas fa-angry"></i></label>
    <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png" onchange="$('form').submit();">
  </div>
</form>

【讨论】：