覆盖fineuploader删除行为?

时间:2015-05-08 07:53:04

标签: javascript jquery fine-uploader

我使用http://fineuploader.com/和删除功能。当fineuploader删除文件时,它会显示加载图像。我不想显示任何加载图像,而是淡出图像。如何覆盖fineupload删除功能" design"用jQuery?

Fineuploader html

    <div class="qq-upload-list-selector">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class ="thumbnail">
            <div class="gallery-box">
            <a href="#" class="qq-upload-delete-selector caption simple-caption delete-single-image just-uploaded">
            <span class="qq-upload-delete-selector glyphicon glyphicon-trash"> Delete</span>
            </a>
                <span class="qq-upload-spinner-selector qq-upload-spinner-overlay">
                <span class="qq-upload-spinner">
                <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
                <span class="upload-photo-text">Uploading photo...</span>
                </span>
                </span>
                <img class="qq-thumbnail-selector" qq-max-size="250" qq-server-scale>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
            </div>
            </div>
        </div>
    </div>

Fineuploader删除

     deleteFile: {
         enabled: true,
         method: "POST",
         endpoint: url + "path..."
     }

我在删除javascript(jQuery),我试图覆盖默认的fineupload删除行为(不工作)。删除功能仍然显示加载图像,图片不会淡出。

.on("delete", function(event, id) {
        $(this).parents(".thumbnail").animate("fast")
        .animate({ opacity: "hide" }, "slow");
    });

1 个答案:

答案 0 :(得分:2)

要在删除完成时对事件作出反应,请订阅deleteComplete事件。在将实际请求发送到服务器并处理删除之前,{em}发送delete事件。在从服务器收到响应后,即使删除成功,也会触发{em}

要删除默认微调器,只需从模板中删除相关元素即可。在这种情况下,请删除:

deleteComplete

然后,您可以在处理程序内部将一个类应用于缩略图元素,该元素将CSS过渡应用于该元素。如果删除失败,那么您可以简单地删除该类并将其转换回来。

认为你的jQuery选择器也是错误的。请注意,Fine Uploader事件处理程序的上下文中的<span class="qq-upload-spinner-selector qq-upload-spinner-overlay"> <span class="qq-upload-spinner"> 引用jQuery包装的$(this)

要添加转换,我建议使用CSS转换,而不是在Javascript中进行转换。

HTMLElement

请注意,在当前版本的Fine Uploader中,删除文件时会从DOM中删除.qq-thumbnail-selector { opacity: 1; } .qq-thumbnail-selector .qq-thumbnail-selector-transition { opacity: 0; transition:opacity .5s, transform .5s; } 的全部内容。如果您希望对此更改做出反应并手动确定是否要删除该元素,请打开功能请求(如果您希望将来考虑将其用于此版本)。

另外,我建议你完全抛弃jQuery。它增加了不必要的复杂性和性能开销。