根据输入类型隐藏/显示=文件值

Question

当我通过选择文件按钮选择/取消选择文件时，它工作正常：

$("input[type='submit']").toggle(false);

$("input[type='file']").change(function() {
  if ($(this).val() != "") {
    $("#btn").toggle();
  } else {
    $("#btn").toggle();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="fld" type="file" name="image" id="file">

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<div id="remove_button">Remove</div>

单击“选择文件”按钮并选择一个文件。将出现上传/编辑图片按钮。现在再次单击选择文件按钮，但不要选择文件并退出小弹出窗口。上传/编辑图片按钮将消失。

在我的情况下，如果我通过单击 <div id="remove_button">Remove</div> 清除该值，我希望清除 input="file" 值，并且上传/编辑图片按钮消失

有没有办法做到这一点？

JSFiddle

Answer 1

将此代码添加到您的 javascript 中

$("#btn").toggle(false);

$("#fld").change(function(){

if($(this).val() != "")
{
 $("#btn").toggle();
} 
else{
 $("#btn").toggle();
}
});

$("#remove_button").click(function(){
  $("#fld").val('');
  document.getElementById("btn").style.visibility = "hidden";
})

并从您的 html 中删除 id 标记。按钮有两个 id 改成这样

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" 
class="btn" />

Answer 2

您可以做的是将点击事件侦听器绑定到#remove_button 元素（我建议您应该使用<button> 而不是<div>）。

在回调中，您可以简单地将文件输入的值设置为空字符串，从而有效地重置字段。请记住，您需要使用.trigger('change') 根据文件输入值手动重新调用显示/隐藏逻辑：

const $submit = $("input[type='submit']");
$submit.hide();

$("#fld").change(function() {
  $submit.toggle(!!this.value);
});

$('#remove_button').click(function() {
  $('#fld').val('').trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="fld" type="file" name="image" id="file">

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<button id="remove_button">Remove</button>