嵌入标签上的文件拖放MVC

Question

我正在尝试将我的embed标签设置为Dropzone。当我将文件拖动到embed标签时，我希望它更改为黄色。但这是行不通的。我想让它像在Gmail中一样具有文字部分，并且可以在其上拖放文件。

我正在使用jquery.filedrop插件。

这是我到目前为止所拥有的：

$(function() {
  $("#dropSection").filedrop({
    fallback_id: 'btnUpload',
    fallback_dropzoneClick: true,
    url: '@Url.Action("Upload")',
    //allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/doc'],
    allowedfileextensions: ['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.gif'],
    paramname: 'fileData',
    maxfiles: 5, //Maximum Number of Files allowed at a time.
    maxfilesize: 2, //Maximum File Size in MB.
    dragOver: function() {
      $('#dropSection').addClass('active');
    },
    dragLeave: function() {
      $('#dropSection').removeClass('active');
    },
    drop: function() {
      $('#dropSection').removeClass('active');
    },
    uploadFinished: function(i, file, response, time) {
      $('#uploadedFiles').append(file.name + '<br />')
    },
    afterAll: function(e) {
      //To do some task after all uploads done.
    }
  })
})

body {
  font-family: Arial;
  font-size: 10pt;
}

#dropSection {
  height: 300px;
  width: 600px;
  background-color: skyblue;
}

#btnUpload {
  display: none;
}

.active {
  background-color: yellow !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/weixiyen/jquery-filedrop/master/jquery.filedrop.js"></script>

<div id="dropSection">
  <embed id="pdf" style="width:100%; height:600px;" src="~/Uploads/mypdf.pdf" />
</div>
<br />
Uploaded Files:
<hr />
<div id="uploadedFiles"></div>
<input type="button" id="btnUpload" value="Upload" />

我想念什么吗？任何帮助将不胜感激。