如何用JS实现表单中图片选择与上传输入的互斥清空？

要清空file类型的输入框，不能直接修改files属性（该属性为只读），正确的方式是将输入框的value设置为空字符串。

修改你的Findimage函数即可实现需求：

function Findimage(event) {
  var Clickedimage = event.target.getAttribute('src');
  var ImageName = FormatURL(Clickedimage);
  $("#imglookupbox").val(ImageName);
  // 替换原来的 file[0].files = null，改为清空value
  $('#image').val('');
  $('#imglookupbox + .dropdown .dropdown-menu').hide();
  event.stopPropagation();
}

同时建议将HTML中img的onclick事件改为传入event参数，避免依赖全局event对象：

<img onclick='Findimage(event)' class='Img_Selection' src='DataBaseSetup/Images/Image1' alt='image1'>
<!-- 其他img标签同样修改 -->

修改后完整代码示例 #

JavaScript

$('#imglookupbox').on('focus', function(e) {
  $('#imglookupbox + .dropdown .dropdown-menu').show();
});

$(document).on('click', function(e) {
  if ($(e.target).closest('#imglookupbox').length === 0) {
    $('#imglookupbox + .dropdown .dropdown-menu').hide();
  }
});

function Findimage(event) {
  var Clickedimage = event.target.getAttribute('src');
  var ImageName = FormatURL(Clickedimage);
  $("#imglookupbox").val(ImageName);
  $('#image').val('');
  $('#imglookupbox + .dropdown .dropdown-menu').hide();
  event.stopPropagation();
}

function previewImage() {
  $("#imglookupbox").val('');
  $("#Imagediscriptextbox").val("N/A");
}

function FormatURL(ImagePath) {
  var Imagename = ImagePath.split('/')[2];
  return Imagename;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imglookupbox" name="selctedimage" type="text" aria-label="Text input with dropdown button">
<div class="dropdown">
  <ul id="Imageoptions" class="dropdown-menu">
    <li>
      <img onclick='Findimage(event)' class='Img_Selection' src='DataBaseSetup/Images/Image1' alt='image1'>
    </li>
    <li>
      <img onclick='Findimage(event)' class='Img_Selection' src='DataBaseSetup/Images/Image2' alt='image2'>
    </li>
    <li>
      <img onclick='Findimage(event)' class='Img_Selection' src='DataBaseSetup/Images/Image3' alt='image3'>
    </li>
  </ul>
</div>
<div id="AddNewImagetxt">
  <p>Add new image.</p>
</div>
<div class="input-group4 Sub" id="UploadImg">
  <input type="file" id="image" name="image" onchange="previewImage()">
</div>

CSS

.dropdown {
  position: relative;
  margin-top: 30px;
  float: left;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-menu li {
  cursor: pointer;
  padding: 5px;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}

这样修改后，当你从列表中选择图片时，file输入框的选中内容会被清空，和上传图片时清空文本框的逻辑保持一致。

内容的提问来源于stack exchange，提问作者Liam Morton