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

时间：2023-04-29

本文介绍了带有上传附件选项 HTML/JQuery 的文本区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

I have created text area that allows user to type in their text as shown below:

<!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 窗口的内容.谁能帮帮我，谢谢.

I want to allow the user to allow be able to drag/drop or upload file attachments to the textarea but I am not quite sure how I can achieve this. I am quite new to web development and I am not sure what such feature would even be called. I have created a screenshot of what I would like, see below - something along the lines of gmail compose window. Please can someone help me, thanks.

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

Once the user has written and uploaded the files, I will be saving them to a database.

推荐答案

我建议使用 DropzoneJS 库.

I suggest using the DropzoneJS library.

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

Create Dropzone object with the options you need and use the sending event to add textarea text to the POST request.

更改默认模板并使用 template-container 在 div 中添加 HTML 标识.然后将 previewTemplate 属性添加到 myDropzone 选项有价值的

Change the default template and add your HTML inside div with template-container id. Then add previewTemplate property to myDropzone options with value

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超级全局数组中.

After submitting the form on the server side the transferred data will be parsed by PHP and saved in $_POST and $_FILES super global arrays.

这篇关于带有上传附件选项 HTML/JQuery 的文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：拖放屏幕上具有相同 ID 类和标记 HTML 的多个元素 下一篇：Javascript DataTransfer 项目不会通过异步调用持久化

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

问题描述

推荐答案

相关文章

最新文章