Question

我正在尝试提供一个上传文件选项，该选项会将多个文件添加到数据库。我可以单独创建一个上传文件选项，但是我想在文本框中输入该选项。

此外，它应该在文本框正下方显示上载的文件名（例如，我们可以在skype文本框或WhatsApp文本框中看到）。

我尝试了以下代码。

<textarea rows="3" class="feedback-input" id="comment"  cols="50">
</textarea>

我以文本区域为例，但是我想在文本框中进行操作。

我尝试并对其进行了大量研发，但直到现在仍无法完成。有人可以帮我吗？

预先感谢！

Answer 1

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container mt-3">
    <div class="input-wrapper">
      <input id="textbox" type="text" class="text-box" />
      <input id="myInput" type="file" style="visibility:hidden" />
      <label class="icon" for="textbox">
     
        <img src="http://files.softicons.com/download/toolbar-icons/mono-general-icons-4-by-custom-icon-design/ico/upload.ico" onClick="$('#myInput').click();" />
      </label>
    </div>
    <p class="text-here"></p>
  </div>

</body>
<style>
  .input-wrapper {
    position: relative;
  }
  
  .icon {
    position: absolute;
    top: 25%;
    left: 220px;
    z-index: 1;
    height: 5px;
    margin-top: -5px;
    width: 100px;
  }
  
  .icon img {
    display: block;
    width: 25px;
  }
  
  .text-box {
    padding-left: 20px;
    height: 30px;
    width: 250px;
    /*pointer-events: none;*/
  }
</style>

</html>

我使用CSS将Icon放在文本框中，然后使用onclick事件调用隐藏的上载input类型

在HTML文本框中上传文件选项/图标

1 个答案: