問題描述
我創建了允許用戶輸入文本的文本區域，如下所示:
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 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 的文本區域的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！