krajee fileinput-js ajax上传成功图标未保留

时间:2020-05-15 12:49:28

标签: bootstrap-file-input jsajaxfileuploader

我正在使用krajee fileiput js通过uploadAsync : true,进行多次上传。我的问题是,成功上传后,文件指示器上的单个图标会显示一小段时间,然后将其删除。但在原始样本中将保留。

下面是我启动文件输入的代码

$("#documents").fileinput({
    showUpload: true,
    uploadAsync : true,
    uploadLabel : 'Upload All Files',
    layoutTemplates: {
        main1: "{preview}\n" +
        "<div class=\'input-group {class}\'>\n" +
        "   <div class=\'input-group-btn\'>\n" +
        "       {browse}\n" +
        "       {upload}\n" +
        "       {remove}\n" +
        "   </div>\n" +
        "   {caption}\n" +
        "</div>"
    },
    fileActionSettings : {
        removeIcon : '<i class="glyphicon glyphicon-trash"></i>',
        uploadIcon : '<i class="fa fa-upload"></i> &nbsp;',
        zoomIcon : '<i class="fa fa-arrows-alt"></i>',
        indicatorNew : '<i class="icon-spam"></i> &nbsp;',
        indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',
        showDrag : false,
        showRemove : false,
    },
    previewZoomButtonIcons : {
        prev: '<i class="fa fa-chevron-left"></i>',
        next: '<i class="fa fa-chevron-right"></i>',
        toggleheader: '<i class="fa fa-arrows-v"></i>',
        fullscreen: '<i class="icon-screen-full"></i>',
        borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
        close: '<i class=" glyphicon  glyphicon-remove"></i>'
    },
    allowedPreviewTypes : ['image'],
    preferIconicPreview : true,
    previewFileIcon : '<i class="fa fa-file text-danger"></i>',
    previewFileIconSettings: {
        'doc': '<i class="fa fa-file-word-o text-primary"></i>',
        'xls': '<i class="fa fa-file-excel-o text-success"></i>',
        'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
        'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
        'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
        'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
        'xml': '<i class="fa fa-file-code-o text-muted"></i>',
    },
    previewFileExtSettings: {
        'doc': function(ext) {
            return ext.match(/(doc|docx)$/i);
        },
        'xls': function(ext) {
            return ext.match(/(xls|xlsx)$/i);
        },
        'ppt': function(ext) {
            return ext.match(/(ppt|pptx)$/i);
        },
        'jpg': function(ext) {
            return ext.match(/(jpg|gif|png|jpeg|bmp)$/i);
        },
        'pdf': function(ext) {
            return ext.match(/(pdf)$/i);
        }
    },

    overwriteInitial : false,
    initialPreviewShowDelete : true,
    initialPreviewDownloadUrl : '',
    initialPreviewAsData: false,
    uploadUrl : 'upload_url',
    uploadExtraData : { "_token" : csrf_token},

    slugCallback: function(filename) {
        return filename.replace('(', '_');
    },
    deleteExtraData : {
        "_token" : csrf_token
    }
}).on('fileuploaded', function() {
    console.log('upload success');  
});```

[![Original sample][1]][1]

[![my upload][2]][2]


  [1]: https://i.stack.imgur.com/zOL3U.gif
  [2]: https://i.stack.imgur.com/HcRPQ.gif

0 个答案:

没有答案
相关问题