Dropzone.js删除隐藏在弹出消息后的链接

xdnvmnnf  于 2022-10-09  发布在  jQuery
关注(0)|答案(3)|浏览(162)

我正在使用Dropzone.js向上传表单添加文件拖放功能,它看起来很好,一切都很好。

然而,当一个文件被拒绝时,如果它太大或不是允许的扩展名,弹出的错误消息会隐藏“Remove”链接,所以你不能删除那个坏文件图标。

有什么办法可以绕过这件事吗?

我认为您可以设置为自动从队列中删除不正确的项目,但这样用户就不会收到解释消息。

也许隐藏一个坏文件的“删除”文本,并在弹出消息中添加一个链接?

或者将图标右下角的“删除”链接更改为一个不会隐藏的小“X”图标?

不确定如何做到这两点,或者是否有更好的解决方案?

uqcuzwp8

uqcuzwp81#

一种解决方案是定制预览模板的dropzonejs css以调整错误消息。例如,在您的案例中,您可以更新:

.dropzone .dz-preview .dz-error-message {
    top: 150px!important;
}

这就是结果:

jtjikinw

jtjikinw2#

当面对同样的问题时,我选择了通过将工具提示稍微降低一点,并更改其箭头的位置和大小以不遮挡删除链接的方式来解决它。我还将链接的文本缩短为“删除”,并设置了样式以使其看起来更好。

以下是我的css定制:

.dropzone .dz-preview .dz-image img {
    margin: auto;   /* center the image inside the thumbnail */
}
.dropzone .dz-preview .dz-error-message {
    top: 140px;     /* move the tooltip below the "Remove" link */
}
.dropzone .dz-preview .dz-error-message:after {
    left: 30px;     /* move the tooltip's arrow to the left of the "Remove" link */
    top: -18px;
    border-bottom-width: 18px;
}
.dropzone .dz-preview .dz-remove {
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
}
6ovsh4lw

6ovsh4lw3#

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block; 
  position: absolute; /* add this */
  top: 150px;         /* add this */
}

相关问题