使用Filedrop HTML 5 Jquery拖放文件

isr3a4wc  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(131)

我有这个简单的代码拖放文件到网页,但它不工作!拖放区域应该改变背景颜色,当我拖动一个文件,但它没有!你能告诉我为什么吗?谢谢

<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>
ppcbkaq5

ppcbkaq51#

您应该添加Fallback_id
类似下面的东西:

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

fallback_id是输入type=file的ID

相关问题