bootstrap fileinput 上传 编辑 删除

时隔1年多，我又开始写bootstrap了，对于之前的东西进行弥补一下，下面进入主题：

如果没有bootstrap fileinput相关的包直接点击下载：

链接：https://pan.baidu.com/s/1tkVRK22PEAEfEQxRtLwIrw?pwd=1234
提取码：1234

<!-- fileinput文件上传插件 -->
<link href="~/static/libs/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
<link href="~/static/libs/bootstrap-fileinput/themes/explorer/theme.css" rel="stylesheet" />
<script src="~/static/libs/bootstrap-fileinput/js/plugins/sortable.min.js"></script>
<script src="~/static/libs/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="~/static/libs/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="~/static/libs/bootstrap-fileinput/js/plugins/piexif.min.js"></script>
<script src="~/static/libs/bootstrap-fileinput/themes/explorer/theme.min.js"></script>
<style type="text/css">
    .btn-file, .file {
        width: 120px;
    }
</style>

HMTL

    <div class="col-xs-12 mokkframework-form-item">
        <div class="mokkframework-form-item-title">附件</div>
        <div class="form-group">
            <div class="file-loading">
                <input id="uploaddoc" type="file" multiple>
            </div>
        </div>
    </div>

上传JS

<script type="text/javascript">
    var uploadrul = "/File/MultiFileUpload";
    var picArr = [];
    $(document).ready(function () {
        $("#uploaddoc").fileinput({
            'theme': 'explorer-fas',
            language: 'zh',
            uploadUrl: uploadrul, //上传的地址
            uploadAsync: false, //默认异步上传
            overwriteInitial: false,
            /*     initialPreviewAsData: true,*/
            showUpload: false,
            browseClass: "btn btn-primary", //按钮样式
            showCaption: false,//是否显示被选文件的简介
        }).on('fileclear', function (event) { //移除所有文件-清除-前加载
            //清空
            picArr = [];
            })
            //.on('filecleared', function (event) { //移除所有文件-清除-后加载
            //    debugger;
            //})
            .on("filesuccessremove", function (event, uploadedId, index) {
                debugger;
                //获取标签下面所有的标签
                var allfile = $(".file-preview-thumbnails .file-preview-success");
                if (allfile.length > 0) {
                    for (var i = 0; i < allfile.length; i++) {
                        if ($(".file-preview-thumbnails .file-preview-success")[i].id == uploadedId) {
                            picArr.splice(i, 1);
                            break;
                        }
                    }
                }
            })
            .on('filebatchselected', function (event, files) {
                $("#uploaddoc").fileinput("upload");//上传文件
            })
            //异步上传成功后执行
            //.on("fileuploaded", function (event, data) {
            //    var res = data.response;
            //    debugger;
            //    if (res.isSuccess == true) {
            //        //异步上传，返回来的值添加到隐藏的input里面提交上去一起处理
            //        $("#FilePath").val(res.path);
            //        $.modal.alertSuccess(res.returnMsg)
            //    }
            //    else {
            //        $.modal.alertError(res.returnMsg)
            //    }
            //})
            //即同步上传成功结果处理
            .on('filebatchuploadsuccess', function (event, data, previewId, index) {
                var res = data.response;
                debugger;
                if (res.isSuccess == true) {
                    //返回来的值添加到picArr,提交处理
                    if (res.filePathArray.length > 0) {
                        for (var i = 0; i < res.filePathArray.length; i++) {
                            picArr.push(res.filePathArray[i].FilePath);
                        }
                    }
                    $.modal.alertSuccess(res.returnMsg)
                }
                else {
                    $.modal.alertError(res.returnMsg)
                }
            })
            //即同步上传错误结果处理
            .on('filebatchuploaderror', function (event, data, msg) {
                $.modal.alertError("上传失败")
            });
        //所有文件上传成功后执行
        //.on('filebatchuploadcomplete', function (event, files, extra) {
        //    debugger;
        //});
    });

    $(function () {
        initControl();
    });

    //初始化控件
    function initControl() {
        
    }

    //保存表单
    function acceptClick() {

     var postData = $("#form").getFormData("");
        $.operate.saveTab(
            "url?filepathstr=" + picArr.join(','),
            postData);

    }
</script>

编辑JS

<script type="text/javascript">
    var keyValue = request('keyValue');

    var initialPreview = initialPreview;//预览视图
    var initialPreviewConfig = initialPreviewConfig;//预览配置
    var picArr = [];//新上传的路径
    var ylpicArr = [];//预览集合（编辑之前的数据集合）
    var delpicArr = [];//只存之前存在数据，被删除的路径
    $(function () {
        initControl();
    });

    //初始化控件
    function initControl() {
      
        //获取表单
        if (keyValue) {
            // 封装的方法-可自行写请求
            mokkframework.setForm({
                url: "",
                param: { key: keyValue },
                success: function (data) {
                    $("#form").setFormData(data);

                    /* # bootstrap fileinput 上传文件的回显参数，initialPreview（列表），initialPreviewConfig（列表）*/
                    initialPreview = [];
                    initialPreviewConfig = [];

                    if (data.FilePathList != null && data.FilePathList.length > 0) {
                        //for (var i = 0; i < data.FilePathList.length; i++) {

                        //    var ipimghtml = "<img src='" + data.FilePathList[i].AppendixPath + "' class='file-preview-image kv-preview-data' title = '" + data.FilePathList[i].AppendixTitle + "' style='width:auto;height:auto;max-width:100%;max-height:100%;'>";
                        //    initialPreview.push(ipimghtml);

                        //    var ipconfightml = {
                        //        'caption': data.FilePathList[i].AppendixTitle, /*# 文件标题*/
                        //        'type': "'" + data.FilePathList[i].AppendixType + "'", //文件类型
                        //        //'downloadUrl': '123123123', // 下载地址
                        //        //'url': '/del_doc_file/', // 预览中的删除按钮的url
                        //        'size': data.FilePathList[i].AppendixSize, //文件大小
                        //        //'extra': { 'doc_uuid': '32423423423' },// 删除文件携带的参数
                        //        //'key': data.FilePathList[i].Id,//att_file.name, /*# 删除时ajax携带的参数*/
                        //        width: "120px",
                        //    };
                        //    initialPreviewConfig.push(ipconfightml);
                        //    // 路径
                        //    ylpicArr.push(data.FilePathList[i].AppendixPath);
                        //}

                        for (var i = 0; i < data.FilePathList.length; i++) {
                            var filemodle = data.FilePathList[i];
                            if (filemodle != null && filemodle != '') {
                                var delImg = new Object();
                                delImg = generFilDel(filemodle);

                                getipf(filemodle);
                                initialPreviewConfig.push(delImg);

                                //存在数据的路径
                                ylpicArr.push(filemodle.AppendixPath);
                            }
                        }

                        // initialPreview 添加
                        function getipf(file) {

                            //文件类型，可自行增删
                            var img_list = ['jpg', 'jpeg', 'jpe', 'gif', 'png', 'pns', 'bmp', 'png', 'tif']
                            var pdf_list = ['pdf']
                            var text_list = ['txt', 'text', 'md', 'csv', 'nfo', 'ini', 'json', 'php', 'js', 'css']

                            /*　 # 根据上传的文件类型，生成不同的HTML，*/
                            if (img_list.indexOf(file.AppendixType) > -1) {
                                initialPreview.push("<img src='" + file.AppendixPath + "' class='file-preview-image' style='max-width:100%;max-height:100%;'>");
                            }
                            else if (pdf_list.indexOf(file.AppendixType) > -1) {
                                initialPreview.push("<div class='file-preview-frame'><div class='kv-file-content'><embed class='kv-preview-data file-preview-pdf' src='" + file.AppendixPath +
                                    "' type='application/pdf' style='width:100%;height:160px;'></div></div>")
                            }
                            else if (text_list.indexOf(file.AppendixType) > -1) {
                                initialPreview.push("<div class='file-preview-frame'><div class='kv-file-content'><textarea class='kv-preview-data file-preview-text' title='" + file.AppendixTitle +
                                    "' readonly style='width:213px;height:160px;'></textarea></div></div>")
                            }
                            else {
                                initialPreview.push("<div class='file-preview-other'><span class='file-other-icon'><i class='glyphicon glyphicon-file'></i></span></div>")
                            }
                        }

                        // initialPreviewConfig添加
                        function generFilDel(file) {

                            if (file.AppendixType == 'pdf') {
                                return { type: "pdf", size: file.AppendixSize, caption: file.AppendixTitle, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            } else if (file.AppendixType == 'text') {
                                return { caption: file.AppendixTitle, type: "text", size: file.AppendixSize, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            }
                            else if (file.AppendixType == 'txt') {
                                return { caption: file.AppendixTitle, type: "text", size: file.AppendixSize, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            } else if (file.AppendixType == 'mp4') {
                                return { type: "video", size: file.AppendixSize, filetype: "video/mp4", caption: file.AppendixTitle, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            } else {
                                return { caption: file.AppendixTitle, size: file.AppendixSize, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath};
                            }
                        }
                    }

                    // 加载文件
                    fileControl();
                }
            });
        }
    }

    // 文件处理
    function fileControl() {
        var uploadrul = "/File/MultiFileUpload";
        $(document).ready(function () {
            $("#uploaddoc").fileinput({
                'theme': 'explorer-fas',
                language: 'zh',
                uploadUrl: uploadrul, //上传的地址
                uploadAsync: false, //默认异步上传
                overwriteInitial: false,
                /*     initialPreviewAsData: true,*/
                showUpload: false,
                browseClass: "btn btn-primary", //按钮样式
                initialPreview: initialPreview,　　// 默认预览设置，回显时会用到
                initialPreviewConfig: initialPreviewConfig,　　// 默认预览的详细配置，回显时会用到
               /* showCaption: false,//是否显示被选文件的简介---不能用这个，因为预加载的时候，移除按钮显示不出来，只能根据类去隐藏*/
            }).on("filedeleted", function (event, key, jqXHR, data) {   //预览文件删除(请求URL之后)必须要调用URL不然调用不了
                debugger;
                if (ylpicArr.length > 0) {
                    for (var i = 0; i < ylpicArr.length; i++) {
                        if (ylpicArr[i] == key) {
                            // 根据索引移除
                            ylpicArr.splice(i, 1);
                            break;
                        }
                    }
                }
                //添加到移除集合-方便删除修改数据
                delpicArr.push(key);
            })
                //.on("filepredelete", function (event, key, jqXHR, data) {   //预览文件删除（请求URL之前）必须要调用URL不然调用不了
                //    debugger;
                //})
                //.on('filebeforedelete', function (event, key, data) { // 预览文件删除（请求URL之前）必须要调用URL不然调用不了
                //    debugger;
                //    console.log('Key = ' + key);
                //})
                .on('fileclear', function (event) { //移除所有文件-清除-前加载--先清楚删除修改的数据
                    //将预加载的数据，同步到删除集合中
                    if (ylpicArr.length > 0) {
                        for (var i = 0; i < ylpicArr.length; i++) {
                            delpicArr.push(ylpicArr[i]);
                        }
                    }
                    //清空
                    initialPreview = [];
                    initialPreviewConfig = [];
                    picArr = [];
                    ylpicArr = [];
                })
                .on('filecleared', function (event) { //移除所有文件-清除-后加载 ---(前加载处理了数据，现在只需要重置)
                    $("#uploaddoc").fileinput("refresh", {
                        initialPreview: initialPreview,
                        initialPreviewConfig: initialPreviewConfig,
                    });
                    //隐藏被选文件的简介
                    $(".kv-fileinput-caption").hide();
                })
                .on("filesuccessremove", function (event, uploadedId, index) { //不是预览文件，删除成功调用
                    debugger;
                    //获取标签下面所有的标签
                    var allfile = $(".file-preview-thumbnails .file-preview-success");
                    if (allfile.length > 0) {
                        for (var i = 0; i < allfile.length; i++) {
                            if ($(".file-preview-thumbnails .file-preview-success")[i].id == uploadedId) {
                                // 根据索引移除
                                picArr.splice(i, 1);
                                break;
                            }
                        }
                    }
                })
                .on('filebatchselected', function (event, files) {
                    $("#uploaddoc").fileinput("upload");//上传文件
                })
                //异步上传成功后执行
                //.on("fileuploaded", function (event, data) {
                //    var res = data.response;
                //    debugger;
                //    if (res.isSuccess == true) {
                //        //异步上传，返回来的值添加到隐藏的input里面提交上去一起处理
                //        $("#FilePath").val(res.path);
                //        $.modal.alertSuccess(res.returnMsg)
                //    }
                //    else {
                //        $.modal.alertError(res.returnMsg)
                //    }
                //})
                //即同步上传成功结果处理
                .on('filebatchuploadsuccess', function (event, data, previewId, index) {
                    var res = data.response;
                    debugger;
                    if (res.isSuccess == true) {
                        //返回来的值添加到picArr,提交处理
                        if (res.filePathArray.length > 0) {
                            for (var i = 0; i < res.filePathArray.length; i++) {
                                picArr.push(res.filePathArray[i].FilePath);
                            }
                        }
                        $.modal.alertSuccess(res.returnMsg)
                    }
                    else {
                        $.modal.alertError(res.returnMsg)
                    }
                })
                //即同步上传错误结果处理
                .on('filebatchuploaderror', function (event, data, msg) {
                    $.modal.alertError("上传失败")
                });

            //所有文件上传成功后执行
            //.on('filebatchuploadcomplete', function (event, files, extra) {
            //    debugger;
            //});
        });

        //隐藏被选文件的简介
        $(".kv-fileinput-caption").hide();
        if (initialPreview.length > 0) {
            // 存在预览文件,显示移除按钮
            $(".input-group-append .fileinput-remove-button").show();
        }

    }
    //保存表单
    function acceptClick() {
 
        var postData = $("#form").getFormData(keyValue);
        $.operate.saveTab(
            "url?key=" + keyValue + "&filepathstr=" + picArr.join(',') + "&delfilepathstr=" + delpicArr.join(','),
            postData);
    }
</script>

查看详情

<script type="text/javascript">
    var keyValue = request('keyValue');

    var initialPreview = initialPreview;//预览视图
    var initialPreviewConfig = initialPreviewConfig;//预览配置
    var picArr = [];//新上传的路径
    var ylpicArr = [];//预览集合（编辑之前的数据集合）
    var delpicArr = [];//只存之前存在数据，被删除的路径
    $(function () {
        initControl();
    });

    //初始化控件
    function initControl() {

        //获取表单
        if (keyValue) {
            mokkframework.setForm({
                url: "",
                param: { key: keyValue },
                success: function (data) {
                    $("#form").setFormData(data);
 
                    /* # bootstrap fileinput 上传文件的回显参数，initialPreview（列表），initialPreviewConfig（列表）*/
                    initialPreview = [];
                    initialPreviewConfig = [];

                    if (data.FilePathList != null && data.FilePathList.length > 0) {
                        //for (var i = 0; i < data.FilePathList.length; i++) {

                        //    var ipimghtml = "<img src='" + data.FilePathList[i].AppendixPath + "' class='file-preview-image kv-preview-data' title = '" + data.FilePathList[i].AppendixTitle + "' style='width:auto;height:auto;max-width:100%;max-height:100%;'>";
                        //    initialPreview.push(ipimghtml);

                        //    var ipconfightml = {
                        //        'caption': data.FilePathList[i].AppendixTitle, /*# 文件标题*/
                        //        'type': "'" + data.FilePathList[i].AppendixType + "'", //文件类型
                        //        //'downloadUrl': '123123123', // 下载地址
                        //        //'url': '/del_doc_file/', // 预览中的删除按钮的url
                        //        'size': data.FilePathList[i].AppendixSize, //文件大小
                        //        //'extra': { 'doc_uuid': '32423423423' },// 删除文件携带的参数
                        //        //'key': data.FilePathList[i].Id,//att_file.name, /*# 删除时ajax携带的参数*/
                        //        width: "120px",
                        //    };
                        //    initialPreviewConfig.push(ipconfightml);
                        //    // 路径
                        //    ylpicArr.push(data.FilePathList[i].AppendixPath);
                        //}

                        for (var i = 0; i < data.FilePathList.length; i++) {
                            var filemodle = data.FilePathList[i];
                            if (filemodle != null && filemodle != '') {
                                var delImg = new Object();
                                delImg = generFilDel(filemodle);

                                getipf(filemodle);
                                initialPreviewConfig.push(delImg);

                                //存在数据的路径
                                ylpicArr.push(filemodle.AppendixPath);
                            }
                        }

                        // initialPreview 添加
                        function getipf(file) {

                            //文件类型，可自行增删
                            var img_list = ['jpg', 'jpeg', 'jpe', 'gif', 'png', 'pns', 'bmp', 'png', 'tif']
                            var pdf_list = ['pdf']
                            var text_list = ['txt', 'text', 'md', 'csv', 'nfo', 'ini', 'json', 'php', 'js', 'css']

                            /*　 # 根据上传的文件类型，生成不同的HTML，*/
                            if (img_list.indexOf(file.AppendixType) > -1) {
                                initialPreview.push("<img src='" + file.AppendixPath + "' class='file-preview-image' style='max-width:100%;max-height:100%;'>");
                            }
                            else if (pdf_list.indexOf(file.AppendixType) > -1) {
                                initialPreview.push("<div class='file-preview-frame'><div class='kv-file-content'><embed class='kv-preview-data file-preview-pdf' src='" + file.AppendixPath +
                                    "' type='application/pdf' style='width:100%;height:160px;'></div></div>")
                            }
                            else if (text_list.indexOf(file.AppendixType) > -1) {
                                initialPreview.push("<div class='file-preview-frame'><div class='kv-file-content'><textarea class='kv-preview-data file-preview-text' title='" + file.AppendixTitle +
                                    "' readonly style='width:213px;height:160px;'></textarea></div></div>")
                            }
                            else {
                                initialPreview.push("<div class='file-preview-other'><span class='file-other-icon'><i class='glyphicon glyphicon-file'></i></span></div>")
                            }
                        }

                        // initialPreviewConfig添加
                        function generFilDel(file) {

                            if (file.AppendixType == 'pdf') {
                                return { type: "pdf", size: file.AppendixSize, caption: file.AppendixTitle, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            } else if (file.AppendixType == 'text') {
                                return { caption: file.AppendixTitle, type: "text", size: file.AppendixSize, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            }
                            else if (file.AppendixType == 'txt') {
                                return { caption: file.AppendixTitle, type: "text", size: file.AppendixSize, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            } else if (file.AppendixType == 'mp4') {
                                return { type: "video", size: file.AppendixSize, filetype: "video/mp4", caption: file.AppendixTitle, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            } else {
                                return { caption: file.AppendixTitle, size: file.AppendixSize, url: "/File/BsDelFileUpload", key: file.AppendixPath, downloadUrl: file.AppendixPath };
                            }
                        }
                    }

                    // 加载文件
                    fileControl();
                }
            });
        }
    }

    // 文件处理
    function fileControl() {
        var uploadrul = "/File/MultiFileUpload";
        $(document).ready(function () {
            $("#uploaddoc").fileinput({
                'theme': 'explorer-fas',
                language: 'zh',
                uploadUrl: uploadrul, //上传的地址
                uploadAsync: false, //默认异步上传
                overwriteInitial: false,
                /*     initialPreviewAsData: true,*/
                showUpload: false,
                browseClass: "btn btn-primary", //按钮样式
                initialPreview: initialPreview,　　// 默认预览设置，回显时会用到
                initialPreviewConfig: initialPreviewConfig,　　// 默认预览的详细配置，回显时会用到
                layoutTemplates: {
                    actionDelete: '',// 隐藏预览删除按钮
                },
                dropZoneEnabled: false,
                showBrowse: false, //是否显示上传按钮
                showRemove: false,//是否显示移除按钮
                showCaption: false,//是否显示被选文件的简介
            })
        });
    }
</script>

调用的上传方法：https://www.cnblogs.com/yueyongsheng/p/16384504.html

fileinput 的触发相关属性：例如：.on('fileclear', function (event)   官网说明：https://plugins.krajee.com/file-input/plugin-events#top

.NET CORE 上传推荐：https://www.cnblogs.com/Can-daydayup/p/12637100.html

Bootstrap fileinput 插件说明相关好案例：https://blog.csdn.net/kuaile211/article/details/118229687