bootstrapfileinput上传控件

bootstrap-fileinput上传控件

1、新增

// 初始化上传控件
    $(".file-upload").fileinput({
        uploadUrl: ctx + 'general/mateSub/uploadFtp',
        maxTotalFileCount: 1,
        // maxFileSize: 2097152, // 单位kb
        maxFilePreviewSize: 2097152,
        showCaption: false, // 不显示文件选择框
        showClose: false, // 隐藏右上角删除
        showRemove: false,
        fileActionSettings: {
            // removeClass: 'hideBtn',
            downloadClass: 'hideBtn',
            uploadClass: 'hideBtn'
        },
        allowedFileExtensions: ["bmp", "gif", "jpg", "jpeg", "png", "doc", "docx", "xls", "xlsx", "ppt", "pptx",
            "txt", "rar", "zip", "gz", "bz2", "mp4", "avi", "rmvb", "wav", "wmv", "mpg",
            "pdf", "mp3"]
    }).on('fileuploaded', function (event, data, previewId, index) {
        if (data.response.code === web_status.SUCCESS) {
            // 将上传的url赋值到输入框
            $("input[name='" + event.currentTarget.id + "']").val(data.response.fileName);
            $("input[name='mateSubSize']").val(data.response.fileSize);
        } else {
            $.modal.alertError(data.response.msg);
        }
    }).on('filesuccessremove', function (event, id, index) {
        // 上传之后删除本地素材
        var path = $("input[name='" + event.currentTarget.id + "']").val()
        $.ajax({
            url: ctx + "general/mateSub/deleteFile",
            data: {
                "fileName": path
            },
            type: "post",
            success: function (result) {
                if (result.code === web_status.SUCCESS) {
                    $("input[name='" + event.currentTarget.id + "']").val('');
                } else {
                    $.modal.alertError(result.msg);
                }
            }, error: function (result) {
                $.modal.alertError(result.msg);
            }
        });
    }).on('filebrowse', function (event) {
        // 这里限制只能选择一个文件，每当点击选择文件时，清除预览图
        $(event.target).fileinput('clear');
        // 清除文件地址
        $("input[name='" + event.currentTarget.id + "']").val('')
    });

2、编辑（带回显）

        // 文件地址
        var fileName = [[${portalMaterial.materialUrl}]];
        var fileSize = [[${portalMaterial.materialSize}]];
        // 文件是否存在
        var exist = [[${exist}]];
        // 回显地址
        var initialPreview = [];
        // 回显参数（名称、大小、缩略图等）
        var initialPreviewConfig = [];
        var preView = generFilDel(fileName);
        initialPreview.push(fileName);
        initialPreviewConfig.push(preView);

        /**
         * 封装回显数据类
         * @param fileName
         * @returns {Object}
         */
        function generFilDel(fileName){
            var o = new Object();
            // 回显的显示的文件名
            o.caption = fileName;
            o.size = fileSize;
            // 删除地址
            o.url = ctx + 'common/delete';
            // 删除时额外传递的参数,默认带着key
            o.extra = function() {
                return {fileName: fileName};
            }
            // 如果没有地址，默认为图片类型
            if( fileName == null || fileName.indexOf(".") == -1 || !exist){
                //return {"type":null,"fileType":null};
                o.type = "txt";
                o.filetype = "text/"+fileTyp;
                o.caption = "文件已被删除，请重新上传";
                return o;
            }
            //获取最后一个.的位置
            var index= fileName.lastIndexOf(".");
            //获取后缀
            var fileTyp = fileName.substr(index+1);
            if(["bmp", "gif", "jpg", "jpeg", "png"].join(",").indexOf(fileTyp) !== -1){
                o.type = "image";
                o.filetype = "image/"+fileTyp;
                return o;
            }
            else if (["mp3"].join(",").indexOf(fileTyp) !== -1) {
                o.type = "audio";
                o.filetype = "audio/"+fileTyp;
                return o;
            } else if(["swf", "flv" , "mp4","wav", "wma", "wmv", "mid", "avi", "mpg",
                "rm", "rmvb"].join(",").indexOf(fileTyp) !== -1) {
                o.type = "video";
                o.filetype = "video/"+fileTyp;
                return o;
            } else if (["pdf"].join(",").indexOf(fileTyp) !== -1){
                o.type = "pdf";
                o.filetype = "pdf/"+fileTyp;
            } else if (["txt"].join(",").indexOf(fileTyp) !== -1) {
                o.type = "text";
                o.filetype = "text/"+fileTyp;
            } else {
                o.type = "other";
                o.filetype = "other/"+fileTyp;
            }
            return o;
        }

        // 初始化上传控件
        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1, // 最多上传一个文件
            // maxFileSize: 2097152,   // 限制文件大小
            maxFilePreviewSize: 2097152,  // 预览文件的大小
            showRemove: false, // 隐藏删除按钮
            showUpload: false, // 隐藏上传按钮
            showBrowse: false, // 隐藏选择文件按钮
            showClose: false, // 隐藏右上角删除
            fileActionSettings: {
                removeClass: 'hideBtn',
                downloadClass: 'hideBtn',
                uploadClass: 'hideBtn'
            },
            showCaption: false, //是否显示标题
            initialPreviewAsData: true,
            initialPreviewShowDelete: true,
            initialPreview: initialPreview,
            initialPreviewConfig: initialPreviewConfig
        });