包含上载附件选项的文本区域HTML/JQuery
包含上载附件选项的文本区域HTML/JQuery
提问于 2018-07-08 21:39:33
我已经创建了文本区，允许用户键入他们的文本，如下所示：
<!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窗口的内容。有人能帮帮我吗，谢谢。
一旦用户编写并上传了文件，我将把它们保存到数据库中。
回答 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
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超级全局数组中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51232563
复制相关文章
相似问题
腾讯云开发者
