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

【问题标题】：Text area with upload attachments options HTML/JQuery带有上传附件选项 HTML/JQuery 的文本区域
【发布时间】：2018-12-16 08:54:39
【问题描述】：

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

<!DOCTYPE html>
<html>
<body>

<textarea rows="4" cols="50">
Please type your favourite foods here and upload attachments if you want!</textarea>

</body>
</html>

我想让用户允许将文件附件拖放或上传到文本区域，但我不太确定如何实现这一点。我对 Web 开发很陌生，我不确定这样的功能会被称为什么。我已经创建了我想要的屏幕截图，见下文 - 类似于 gmail compose 窗口的内容。谁能帮帮我，谢谢。

用户编写并上传文件后，我会将它们保存到数据库中。

【问题讨论】：

你在寻找这样的东西吗：stackoverflow.com/questions/9544977/…
嗨@vahdet 是的，但我想使用文本区域而不是 div，因为我还希望用户能够输入文本。另外，我想在窗口中显示上传的附件，如上图所示。

标签： javascript jquery html drag-and-drop textarea

【解决方案1】：

我建议使用 DropzoneJS 库。

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

更改default template 并将您的HTML 添加到带有template-container id 的div 中。然后将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;
}

<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和$_FILES超级全局数组中。

【讨论】：

太好了，我现在来测试一下。这可以让我将附件和文本保存到数据库吗？
当我拖放文件时，它似乎没有像帖子中的图片那样附加/显示在屏幕上。
此代码需要 jQuery。浏览器控制台有错误吗？
我一直在努力让它在 jsfiddle 中工作 - jsfiddle.net/r3dtnukw/6，请你看看。我似乎无法让它工作。
即使使用 jquery，它似乎也不会在屏幕上显示/上传数据。知道为什么吗？