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

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" />