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

2019-10-13 15:34:24 阅读：201 来源： 互联网

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

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

<!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撰写窗口.请有人可以帮助我,谢谢.

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

解决方法:

我建议使用DropzoneJS库.

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

更改default template并在div中添加带有模板容器ID的HTML.然后将previewTemplate属性添加到myDropzone选项
有价值

document.querySelector( ‘#模板容器’).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超级全局数组中.

标签：html,javascript,jquery,drag-and-drop,textarea
来源： https://codeday.me/bug/20191013/1908794.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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