Question

我正在使用Dropzonejs进行多文件上传，并启用了拖放选项。

我面临以下问题。

我已成功实施 dragenter 以检测拖放到dropzone中并显示不同的预览div（.dz-drag）。拖动后，应再次显示默认预览。没有定义dragleave函数，dragenter函数工作正常。
至于拖动假，插件没有按要求响应。似乎拖动离开是覆盖dragenter功能。

这是我的代码

HTML

<div id="preview" class="dropzone">
   <div class="dz-drag">
       <h2><i class="glyphicon glyphicon-arrow-down"></i></h2>
       <p>Drop files here</p>
   </div>
   <div class="dz-preview default"><i class="glyphicon glyphicon-plus"></i>           
   </div>
</div>

JS

    var myDropzone = new Dropzone(document.body, {// Make the whole body a dropzone
        url: "insert-status.php", // Set the url
        method: 'POST',
        paramName: 'image',
        parallelUploads: 1,
        addRemoveLinks: true,
        uploadMultiple: false,
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        autoQueue: false, // Make sure the files aren't queued until manually added
        dictResponseError: "Sorry! Something went wrong. Please try again.",
        previewsContainer: "#preview", // Define the container to display the previews
        clickable: ".file-click, #preview", //Define all the Clickable elements for this Dropzone
        acceptedFiles: "image/jpeg, image/jpg, image/gif, image/png, image/bmp, video/mp4, video/avi, video/mvi, video/3gp",

        dragenter: function(file) {
            $('.dz-preview').hide();
            $('.dz-drag').show();
            $('.preview-cont').addClass('added'); //Show Preview Container
        },
        dragleave: function(file) {
            alert('leave');
            $('.dz-drag').hide();
            $('.dz-preview').show();
            $('.preview-cont').removeClass('added'); //Show Preview Container
            $('.preview-cont').removeClass('added'); //Hide Preview Container - Not working
        },
        drop: function(file) {
            $('.dz-preview').show();
            $('.dz-drag').hide();
        }

CSS

   .preview-cont:not(.added){
display:none;
}

.dz-preview.default{
    width: 80px;
    margin:5px 3px;
    border: 0.17em dashed rgba(0,0,0,0.15);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}
.dz-preview.default .glyphicon{
    position:absolute;
    margin-top:35%;
    margin-left:40%;
    color: rgba(0,0,0,0.15);
    font-weight:500;
    font-size:150%;
}

.dz-preview.default:hover{
    border-color:rgba(0,0,0,0.23);
}
.dz-preview.default:hover > .glyphicon{
    color:rgba(0,0,0,0.23);
}

.dz-drag{
    display:none;
    width:100%;
    background:rgba(255,255,255,0.7);
    text-align:center;
    border:2px dashed rgba(0,0,0,0.2);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}

此外，我需要知道我的dropzone中是否存在已存在的文件，无论是ADDED，QUEUED，UPLOADING还是其他任何文件状态。除了使用内置的getFilesWithStatus函数之外，还有一种方法可以检测文件存在吗？我的目的是通过单个函数调用来检测。
我通过禁用/隐藏可点击的链接和按钮来处理maxfilesreached功能。现在，当删除最后添加的文件时，我想重新启用所有已禁用的链接。我还没有找到办法执行此操作。

Answer 1

尝试dragover和dragleave
见1.
不确定您的意思是＆＃34;检测到文件存在＆＃34;，但是丢弃事件有帮助吗？
我已经使用了removefile事件，我只计算页面上有多少个预览模板。如果为0，则删除最后一个文件。

Dropzonejs问题 - Dragleave没有按预期工作

1 个答案: