美文网首页Bootstrap-学习
Bootstarp-fileinput使用

Bootstarp-fileinput使用

作者: 白云青叶 | 来源:发表于2020-02-10 10:57 被阅读0次

    基本版本:v4.3.3

    1、基本引入

        fileinput.min.js、fileinput.min.css、zh.min.js(可选,中文汉化)

    2、页面组件

       <inputid="myFile" name="uploadImgFile" type="file" value="上传" multiple data-show-caption="true" class="myfile" />

    3、Javascript 使用

    $(document).ready(function() {

    $('#myFile').fileinput({

        //初始化上传文件框

       language: "zh",//配置语言

        showUpload : true, //显示整体上传的按钮

        showRemove : true,//显示整体删除的按钮

        uploadAsync: true,//默认异步上传

        uploadLabel: "上传",//设置整体上传按钮的汉字

        removeLabel: "移除",//设置整体删除按钮的汉字

        uploadClass: "btn btn-primary",//设置上传按钮样式

        showCaption: true,//是否显示标题

        dropZoneEnabled: false,//是否显示拖拽区域 

        uploadUrl: 'uploadImgFile.do',//这个是配置上传调取的后台地址,本项目是SSM搭建的

        maxFileSize : 9999,//文件大小限制

        maxFileCount: 9999,//允许最大上传数,可以多个,

        enctype: 'multipart/form-data',

        allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt","db"],/*上传文件格式限制*/

        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",

        showBrowse: true,

        showPreview:false,

        browseOnZoneClick: true,

        slugCallback : function(filename) {

            return filename.replace('(', '_').replace(']', '_');

        },

        uploadExtraData:function(){

             var data={

                     id:$("#id").val()

              }

             return data;

        }

    })

    });

    相关文章

      网友评论

        本文标题:Bootstarp-fileinput使用

        本文链接:https://www.haomeiwen.com/subject/gsfaxhtx.html