使用 Filedrop HTML 5 Jquery 拖放文件

Question

我有这个简单的代码，用于将文件拖放到网页中，但它不起作用！当我在拖放区域上拖动文件时，拖放区域应该更改背景颜色，但事实并非如此！你能告诉我为什么吗？谢谢你。

<script src="~/Scripts/jquery.filedrop.js"></script>
<style type="text/css">
#dropZone {
    background: gray;
    border: black dashed 3px;
    width: 1000px;
    padding: 50px;
    text-align: center;
    color: white;
}
</style>
<script type="text/javascript">
$(function () {
    $('#dropZone').filedrop({
        url: '@Url.Action("UploadFiles")',
        paramname: 'files',
        maxFiles: 5,
        dragOver: function () {
            $('#dropZone').css('background', 'blue');
        },
        dragLeave: function () {
            $('#dropZone').css('background', 'gray');
        },
        drop: function () {
            $('#dropZone').css('background', 'gray');
        },
        afterAll: function () {
            $('#dropZone').html('The file(s) have been uploaded successfully!');
        },
        uploadFinished: function (i, file, response, time) {
            $('#uploadResult').append('<li>' + file.name + '</li>');
        }
    });
});
</script>
<h2>File Drag & Drop Upload</h2>
<div id="dropZone">Drop your files here</div>
<br>
Uploaded Files:
<ul id="uploadResult">        
</ul>

Answer 1

您应该添加

Fallback_id

如下所示：

$('#dropZone').filedrop({
  url: '@Url.Action("UploadFiles")',
  fallback_id:'test'
});

这个

fallback_id

是输入的Id

type=file