Bootstrap-学习

Bootstarp-fileinput使用

2020-02-10  本文已影响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;

    }

})

});

上一篇下一篇

猜你喜欢

热点阅读