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>

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.

回答1:

I suggest using the DropzoneJS library.

Create Dropzone object with the options you need and use the sending event to add textarea text to the POST request.

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>

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.

来源：https://stackoverflow.com/questions/51232563/text-area-with-upload-attachments-options-html-jquery

标签

javascript

jquery

html

drag-and-drop

textarea