我正在尝试提供一个上传文件选项，它将向DB添加多个文件。我可以单独创建一个上传文件选项，但我想在文本框中提供该选项。
此外，它应该在文本框的正下方显示上传的文件名（例如，我们可以在Skype文本框或WhatsApp文本框中看到）。
我试过下面的代码。
<textarea rows="3" class="feedback-input" id="comment" cols="50">
</textarea>
我举了一个文本区域的例子，但我想在文本框上做。
我试过并做了很多研发，但直到现在都无法做到。谁能帮我这个？
提前致谢！
<!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类型