时间戳

首页 > 解决方案 > 根据输入类型隐藏/显示=文件值

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

问题描述

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

$("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>

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

在我的情况下，我希望清除 input="file" 值，如果我通过单击<div id="remove_button">Remove</div>

有没有办法做到这一点？

JSFiddle

标签： javascriptjqueryhtmlinput

解决方案

您可以做的是将 click 事件侦听器绑定到#remove_button元素（我建议您应该使用它<button>而不是 a <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>

推荐阅读