Блог

Главная - Вопросы по программированию - опция загрузки файла / значок внутри текстового поля HTML

опция загрузки файла / значок внутри текстового поля HTML

#html

#HTML

Вопрос:

Я пытаюсь предоставить опцию загрузки файла, которая добавит несколько файлов в базу данных. Я могу создать опцию загрузки файла отдельно, но я хочу указать эту опцию внутри текстового поля.

Кроме того, он должен отображать имена загруженных файлов чуть ниже текстового поля (например, мы можем видеть в текстовом поле skype или текстовом поле WhatsApp).

Я попробовал этот приведенный ниже код.

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

Я взял пример текстовой области, но я хочу сделать это в текстовом поле.

Я пытался и провел много исследований и разработок, но до сих пор не смог этого сделать. Кто-нибудь может мне с этим помочь?

Заранее спасибо!

Ответ №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, чтобы поместить значок внутри текстового поля, затем использовал onclick событие для вызова скрытого типа загрузки input