bootstrap文件上传参数解析

 $(function () {
                initFileInput("input-id");
            })

            function initFileInput(ctrlName) {
                var control = $('#' + ctrlName);

                control.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: "/fileStore/open/upload/file", //上传的地址
                    allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'doc', 'docx', 'zip', 'txt', 'mp3'],//接收的文件后缀
                    uploadAsync: true, //默认异步上传
                    showUpload: true, //是否显示上传按钮
                    showRemove: true, //显示移除按钮
                    showPreview: false, //是否显示预览
                    showCaption: true,//是否显示标题
                    browseClass: "btn btn-primary", //按钮样式
                    dropZoneEnabled: true,//是否显示拖拽区域
                    //minImageWidth: 50, //图片的最小宽度
                    //minImageHeight: 50,//图片的最小高度
                    //maxImageWidth: 1000,//图片的最大宽度
                    //maxImageHeight: 1000,//图片的最大高度
                    maxFileSize: 100000,//单位为kb,如果为0表示不限制文件大小,最大100MB
                    minFileCount: 1,
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    enctype: 'multipart/form-data',
                    validateInitialCount: false,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    previewFileIconSettings: {
                        'jpg': '<i class="fa fa-file-excel-o text-success"></i>',
                        'png': '<i class="fa fa-file-excel-o text-success"></i>',
                        'pdf': '<i class="fa fa-file-excel-o text-success"></i>',
                        'gif': '<i class="fa fa-file-excel-o text-success"></i>',
                        'mp3': '<i class="fa fa-file-excel-o text-success"></i>'
                    },
                    msgFilesTooMany: "选择上传的文件数量超过允许的最大数值6!",
                    ajaxSettings: {
                        beforeSend: function (request) {
                            console.log("--clientId--authorization---");
                            // console.log(clientId);
                            // console.log(authorization); //设置请求头
                            request.setRequestHeader("ClientId", clientId);
                            request.setRequestHeader("Authorization", authorization);
                        }
                    },
                    uploadExtraData: function () {//传递参数
                        return {
                            "parma1": false, 
                            "parma2": 20000 
                        };
                    }

                }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
                    console.log(data);
                    console.log('文件上传成功!' + JSON.stringify(data));
                    //保存上传的返回的url

                    if (data.response.code == 0) {
                        var url = data.response.result;
                        alert(data.files[index].name + "上传成功!");
                        //保存上传的返回的url
                        $.ajax({
                            type: "POST",
                            url: '/open/file/saveCusVisitFile',
                            contentType: 'application/json;charset=utf-8',
                            data: JSON.stringify({//设置json
                                "accountId": b_accountId,
                                "remark": policyNo,
                                "fileName": data.files[index].name,
                                "creator": userName,
                                "url": url
                            }),
                            success: function (res) {
                                console.log('保存url信息!');
                                if (res.code === 0) {
                                    alert(data.files[index].name + "上传成功!");
                                    console.log(JSON.stringify(res));
                                    console.log('保存成功!');
                                } else {
                                    alertErrMsg(res.message);
                                }

                            }
                        });
                    } else {
                        alert(data.files[index].name + "上传失败!" + data.response.message);
                    }
                    //重置
                    $("#input-id").fileinput("clear").fileinput("reset").fileinput('refresh').fileinput('enable');

                }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
                    console.log('文件上传失败!' + data.message);
                    $("#input-id").fileinput("clear").fileinput("reset").fileinput('refresh').fileinput('enable');
                });

            }

 

参考链接:

https://www.cnblogs.com/wangjintao-0623/p/10640915.html

源码以及API地址:

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API:http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo

posted @ 2021-02-05 15:49  一人一见  阅读(309)  评论(0编辑  收藏  举报