使用Bootstrap的文件上传如何添加文件排序按钮

图片说明
前三张图是示例自带的,有三个横杠,拖拽横杠可以排序这三张图,第四张图是我另外拖拽进去的,如何能让拖拽进去的图也能排序

文字排序具体需求是什么呢

我也碰到了这个问题,希望能帮到你~
直接调用插件的destroy方法后,重新初始化插件,初始化时记得在最后调用enable方法,否则会造成第三次上传回调没有反应。
以下是我的部分源码:
//销毁对象
$(".file-input-overwrite").fileinput("destroy");
//初始化
initFileInputObj(newPreviewsArr, newConfigArr);
function initFileInputObj(previewsArr, configArr){
// Modal template
var modalTemplate = '

\n' +
'
\n' +
'
\n' +
'
{toggleheader}{fullscreen}{borderless}{close}
\n' +
'
{heading}
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' + '{prev} {next}\n' +
'
\n' +
'
\n' +
'
\n';

// Buttons inside zoom modal
var previewZoomButtonClasses = {
toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
fullscreen: 'btn btn-default btn-icon btn-xs',
borderless: 'btn btn-default btn-icon btn-xs',
close: 'btn btn-default btn-icon btn-xs'
};

// Icons inside zoom modal classes
var previewZoomButtonIcons = {
prev: '',
next: '',
toggleheader: '',
fullscreen: '',
borderless: '',
close: ''
};

// File actions
var fileActionSettings = {
zoomClass: 'btn btn-link btn-xs btn-icon',
zoomIcon: '',
dragClass: 'btn btn-link btn-xs btn-icon',
dragIcon: '',
removeClass: 'btn btn-link btn-icon btn-xs',
removeIcon: '',
indicatorNew: '',
indicatorSuccess: '',
indicatorError: '',
indicatorLoading: ''
};

$(".file-input-overwrite").fileinput({
    uploadAsync: true,
    showDrag: true,
    dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',
    dragClass: 'text-info',
    language: 'zh',
    overwriteInitial: true,
    browseLabel: 'Browse',
    browseIcon: '<i class="icon-file-plus"></i>',
    uploadIcon: '<i class="icon-file-upload2"></i>',
    removeIcon: '<i class="icon-cross3"></i>',
    layoutTemplates: {
        icon: '<i class="icon-file-check"></i>',
        modal: modalTemplate
    },
    initialPreview: previewsArr,
    initialPreviewConfig: configArr,
    initialPreviewAsData: true,
    overwriteInitial: true,
    previewZoomButtonClasses: previewZoomButtonClasses,
    previewZoomButtonIcons: previewZoomButtonIcons,
    fileActionSettings: fileActionSettings,
    uploadUrl: "/admin/product/upload?from=file&dir=product&id=@model.getProductId()",
    maxFileCount: 5
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on("filebatchselected", function(event, files) {
    picture_size = files.length;
    console.log("picture_size:"+picture_size);
    $(this).fileinput("upload");
}).on("fileuploaded", function(event, r, previewId, index) {
    console.log(123);
    var data = r.response;
    console.log(data);
    console.log(previewId);
    console.log(index);

    selectedImagesStr = selectedImagesStr + data.data.file_name + ",";
    console.log(selectedImagesStr);
    //若为最后一张上传的图片,重新初始化fileinput插件
    picture_index++;
    if(picture_index == picture_size
        && picture_index != 0
        && picture_size != 0){
        console.log("开始重新渲染插件");
        refreshFileinput();
        picture_index = 0;
        picture_size = 0;
        selectedImagesStr = "";
    }
}).fileinput("enable");//enable作用:destroy并重新初始化fileinput插件后,插件会处于disable状态

}

可以看看sortable.js

https://www.cnblogs.com/xuehaoyue/p/6978374.html