загрузить опцию файла / значок внутри текстового поля HTML - PullRequest
Новая
       1

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

3 голосов
/ 29 марта 2019

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 29 марта 2019 

<!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 type

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...