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

2022-01-11 00:00:00 drag-and-drop jquery javascript html textarea

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

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.

相关文章