首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >包含上载附件选项的文本区域HTML/JQuery

包含上载附件选项的文本区域HTML/JQuery
EN

Stack Overflow用户
提问于 2018-07-08 21:39:33
回答 1查看 3.3K关注 0票数 1

我已经创建了文本区,允许用户键入他们的文本,如下所示:

代码语言:javascript
复制
<!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窗口的内容。有人能帮帮我吗,谢谢。

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-09 00:39:01

我建议使用DropzoneJS库。

使用所需的options创建Dropzone对象,并使用sending事件将文本区域文本添加到POST请求中。

更改default template并将您的HTML与template-container id一起添加。然后,使用值将previewTemplate属性添加到myDropzone选项

document.querySelector('#template-container').innerHTML

代码语言:javascript
复制
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();
});
代码语言:javascript
复制
#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;
}
代码语言:javascript
复制
<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超级全局数组中。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51232563

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档