覆盖 fineuploader 删除行为?
Override fineuploader delete behavior?
我正在使用 http://fineuploader.com/ 和删除功能。当 fineuploader 删除文件时,它会显示加载图像。我不想显示任何加载图像而是淡出图像。如何用 jQuery 覆盖 fineupload 删除函数 "design"?
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..."
}
My on delete javascript (jQuery) 我尝试覆盖默认的 fineupload 删除行为(不工作)。删除功能仍然显示加载图片,图片没有淡出。
.on("delete", function(event, id) {
$(this).parents(".thumbnail").animate("fast")
.animate({ opacity: "hide" }, "slow");
});
要在删除完成时对事件做出反应,请订阅 deleteComplete
事件。 delete
事件在 实际请求发送到服务器并处理删除之前 触发。即使删除成功,deleteComplete
事件也会在 从服务器收到响应后触发。
要删除默认微调器,只需从模板中删除相关元素即可。在这种情况下删除:
<span class="qq-upload-spinner-selector qq-upload-spinner-overlay">
<span class="qq-upload-spinner">
然后,您可以在您的处理程序中将 class 应用于缩略图元素,这将向该元素应用 CSS 过渡。如果删除失败,那么您可以简单地删除 class 并将其转换回来。
我 认为 你的 jQuery 选择器也不正确。请注意,在 Fine Uploader 事件处理程序的上下文中,$(this)
指的是 jQuery-wrapped HTMLElement
.
要添加过渡,我建议使用 CSS 过渡,而不是在 Javascript 中进行。
.qq-thumbnail-selector {
opacity: 1;
}
.qq-thumbnail-selector .qq-thumbnail-selector-transition {
opacity: 0;
transition:opacity .5s, transform .5s;
}
请注意,在当前版本的 Fine Uploader 中,当文件被删除时,"qq-upload-list-selector"
的全部内容将从 DOM 中删除。如果您更愿意对此更改做出反应并手动确定是否删除该元素,然后打开一个功能请求,如果您希望在未来的版本中考虑这一点。
此外,我建议您完全放弃 jQuery。它增加了不必要的复杂性和性能开销。
我正在使用 http://fineuploader.com/ 和删除功能。当 fineuploader 删除文件时,它会显示加载图像。我不想显示任何加载图像而是淡出图像。如何用 jQuery 覆盖 fineupload 删除函数 "design"?
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..."
}
My on delete javascript (jQuery) 我尝试覆盖默认的 fineupload 删除行为(不工作)。删除功能仍然显示加载图片,图片没有淡出。
.on("delete", function(event, id) {
$(this).parents(".thumbnail").animate("fast")
.animate({ opacity: "hide" }, "slow");
});
要在删除完成时对事件做出反应,请订阅 deleteComplete
事件。 delete
事件在 实际请求发送到服务器并处理删除之前 触发。即使删除成功,deleteComplete
事件也会在 从服务器收到响应后触发。
要删除默认微调器,只需从模板中删除相关元素即可。在这种情况下删除:
<span class="qq-upload-spinner-selector qq-upload-spinner-overlay">
<span class="qq-upload-spinner">
然后,您可以在您的处理程序中将 class 应用于缩略图元素,这将向该元素应用 CSS 过渡。如果删除失败,那么您可以简单地删除 class 并将其转换回来。
我 认为 你的 jQuery 选择器也不正确。请注意,在 Fine Uploader 事件处理程序的上下文中,$(this)
指的是 jQuery-wrapped HTMLElement
.
要添加过渡,我建议使用 CSS 过渡,而不是在 Javascript 中进行。
.qq-thumbnail-selector {
opacity: 1;
}
.qq-thumbnail-selector .qq-thumbnail-selector-transition {
opacity: 0;
transition:opacity .5s, transform .5s;
}
请注意,在当前版本的 Fine Uploader 中,当文件被删除时,"qq-upload-list-selector"
的全部内容将从 DOM 中删除。如果您更愿意对此更改做出反应并手动确定是否删除该元素,然后打开一个功能请求,如果您希望在未来的版本中考虑这一点。
此外,我建议您完全放弃 jQuery。它增加了不必要的复杂性和性能开销。