带有上传附件选项HTML / JQuery的文本区域

我创建了文本区域，允许用户输入文本，如下所示：

    Please type your favourite foods here and upload attachments if you want!   

我想允许用户允许能够拖放文件附件或将文件附件上传到文本区域，但我不确定如何实现这一点。 我对Web开发很陌生，我不确定甚至会调用这样的function。 我已经创建了一个我想要的截图，请参阅下面的内容 – 这与gmail撰写窗口有关。 请有人帮帮我，谢谢。

一旦用户编写并上传了文件，我将把它们保存到数据库中。

Answer 1

我建议使用DropzoneJS库。

使用您需要的选项创建Dropzone对象，并使用发送事件将textarea文本添加到POST请求。

更改默认模板并使用template-container id在div中添加HTML。 然后使用value将previewTemplate属性添加到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; }