zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Genymotion安装与集成开发指南
    近期遇到的Android问题解决与总结
    关于Android Studio乱码的解决办法
    菜鸟程序员如何才能快速提高自己的技术
    android不能调试解决方法
    导入工程出现@Override错误
    读取本地文件的权限问题
    混合app开发
    JNI 实战全面解析
    Android性能优化
  • 原文地址:https://www.cnblogs.com/personsiglewine/p/14378156.html
Copyright © 2011-2022 走看看