javascript - Bootstrap 文件输入 - 如何在初始预览中隐藏拖动按钮？

Question

我正在使用引导文件输入插件来管理用户头像： http: //plugins.krajee.com/file-input/

我正在使用这个 JS 代码初始化插件：

        $("#contact_photo").fileinput({
            showCaption: false, // The "1 file selected non-editable text field"
            showRemove: false, // The "Remove" button
            showUpload: false, // The "Upload" button
            showBrowse: false, // The "Browse ..." button
            browseOnZoneClick: true,

            initialPreview: "{{ lead.contact_photo.url }}",
            initialPreviewConfig: [
                {
                    fileType: 'image',
                    previewAsData: true,
                }
            ],

            removeFromPreviewOnError: true,
            overwriteInitial: true, // Whether to replace the image loaded originally if it exists
            allowedFileExtensions: ['jpg', 'jpeg', 'png'],
            allowedPreviewTypes: ['image'],
            defaultPreviewContent: '<h3>No Contact Photo</h3><h6>Drag or click Browse...</h6>',
            maxFileSize: 10000, // 10 MB
            maxFileCount: 1,
            msgErrorClass: 'alert alert-block alert-danger',
            elErrorContainer: '#kv-avatar-errors-1',
        });

问题是如果initialPreview设置了键，初始预览将包含左下角的“拖动”按钮（带有 4 个方向箭头的图标，这对我的设置没有任何作用）。如何删除它？

我已经尝试showDrag: false在文件输入设置中进行设置，initialPreviewConfig但没有成功。

Answer 1

您可以使用以下方法关闭拖动按钮：

$("#contact_photo").fileinput({
    ...
    fileActionSettings: {
        showDrag: false,
    },
});

Answer 2

只需隐藏拖动项：

$("#contact_photo").fileinput({
    ...
    layoutTemplates: {
        actionDrag: '',
    },
});