我创建了文本区域，允许用户输入文本，如下所示：
<!DOCTYPE html>
<html>
<body>
<textarea rows="4" cols="50">
Please type your favourite foods here and upload attachments if you want!</textarea>
</body>
</html>
我希望允许用户能够将文件附件拖/放或上传到文本区域，但我不太确定如何实现这一点。我对网络开发很陌生，我不确定这样的功能会被称为什么。我已经创建了我想要的屏幕截图，请参见下文 - 类似于 gmail 撰写窗口的内容。请有人帮助我，谢谢。
用户编写并上传文件后，我会将它们保存到数据库中。
我建议使用 DropzoneJS 库。
Create Dropzone对象与options您需要并使用sending将 textarea 文本添加到 POST 请求的事件。
改变默认模板并在 div 中添加 HTMLtemplate-containerID。然后加预览模板财产给myDropzone选项
有价值
document.querySelector('#template-container').innerHTML
Dropzone.autoDiscover = false;
$(document).ready(function() {
Dropzone.options.myDropzone = {
url: $('#my-dropzone').attr('action'),
paramName: "file",
maxFiles: 5,
maxFilesize: 20,
uploadMultiple: true,
thumbnailHeight: 30,
thumbnailWidth: 30,
init: function() {
this.on('sending', function(file, xhr, formData) {
formData.append('favouriteFoodText', document.getElementById('favourite-food-text').value);
}),
this.on("success", function(file, response) {
console.log(response);
})
}
}
$('#my-dropzone').dropzone();
});#b-dropzone-wrapper {
border: 1px solid black;
}
#b-dropzone-wrapper .full-width {
width: 100%
}
#b-dropzone-wrapper textarea {
resize: none;
border: none;
width: 99%;
}
#my-dropzone {
top: -5px;
position: relative;
border: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css" rel="stylesheet" />
<div id="b-dropzone-wrapper">
<textarea rows=5 id="favourite-food-text" placeholder="please write some text here"></textarea>
<form action="file-upload.php" id="my-dropzone" class="dropzone full-widht" method="post" enctype="multipart/form-data"></form>
<input type="submit" value="Submit your entry" class="full-width" />
</div>在服务器端提交表单后，传输的数据将由 PHP 解析并保存在$_POST and $_FILES超级全局数组。