带有上传附件选项HTML / JQuery的文本区域 [英] Text area with upload attachments options HTML/JQuery
问题描述
我创建了允许用户输入文字的文字区域，如下所示：
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>
我想允许用户允许将文件附件拖放或上传到textarea但我不太确定如何实现这一目标。我对Web开发很陌生，我不确定甚至会调用这样的功能。我创建了一个我想要的截图，见下文 - gmail撰写窗口的内容。请有人帮助我，谢谢。
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.
使用 Dropzone 对象您需要的配置选项rel =nofollow noreferrer>选项并使用发送将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 id在div中添加HTML。然后将 previewTemplate 属性添加到 myDropzone options
with value
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的文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
