1.使用插件需要先导入
<link rel="stylesheet" href="../css/fileinput.min.css"/>
<script src="../js/fileinput.min.js"></script>
<script src="../js/zh.js"></script>
其中zh.js为语言包。
2.加入input元素,网上一些代码会加class=“file”,在使用中文的情况下加入class=“file”会导致无法显示中文
<input id="file-pic1" type="file" multiple/>
3.js的编写
$(function(){
$('#file-pic1').fileinput({
//初始化上传文件框
language: "zh",//配置语言
showPreview: false,//是否显示预览
showUpload: true, //显示整体上传的按钮
showRemove: false,//显示整体删除的按钮
uploadAsync: false,//默认异步上传
// uploadLabel: "上传",//设置整体上传按钮的汉字
removeLabel: "移除",//设置整体删除按钮的汉字
uploadClass: "btn btn-primary",//设置上传按钮样式
showCaption: true,//是否显示标题
dropZoneEnabled: false,//是否显示拖拽区域
showUpload: false,//是否显示上传按钮
// uploadUrl: getPath('/gz/tool/toolAction/uploadImgFile'),//这个是配置上传调取的后台地址,本项目是SSM搭建的
maxFileSize : 9999,//文件大小限制
maxFileCount: 1,//允许最大上传数,可以多个,
enctype: 'multipart/form-data',
allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt"],/*上传文件格式限制*/
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
showBrowse: true,
browseOnZoneClick: true,
initialCaption: "请选择上传图片",//输入提示
slugCallback : function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
});
该控件支持异步上传,预览功能,比较好用