使用插件Bootstrap Fileinput文件上传

最近的项目中有用到这个插件，觉得功能挺强大的。

GitHub地址：/kartik-v/bootstrap-fileinput/

git地址：/kartik-v/bootstrap-fileinput.git

类似的效果如下图：

一、载入

<link href="${pageContext.request.contextPath}/plug-in/bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<link href="${pageContext.request.contextPath}/plug-in/bootstrap-fileinput-master/themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/>

<link href="/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

以及js：

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery-2.0.3.min.js"></script>

<script src="/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/plug-in/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/plug-in/bootstrap-fileinput-master/js/plugins/sortable.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/plug-in/bootstrap-fileinput-master/themes/explorer/theme.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/plug-in/bootstrap-fileinput-master/js/locales/zh.js" type="text/javascript"></script>（这是语言包，有很多种可以选）

二、初始化设置：

$("#uploadfile").fileinput({

language: 'zh', //设置语言

uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址

allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

//uploadExtraData:{"id": 1, "fileName":'123.mp3'},

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

showUpload:true, //是否显示上传按钮

showRemove :true, //显示移除按钮

showPreview :true, //是否显示预览

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

browseClass:"btn btn-primary", //按钮样式

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

//minImageWidth: 50, //图片的最小宽度

//minImageHeight: 50,//图片的最小高度

//maxImageWidth: 1000,//图片的最大宽度

//maxImageHeight: 1000,//图片的最大高度

//maxFileSize:0,//单位为kb，如果为0表示不限制文件大小

//minFileCount: 0,

maxFileCount:10, //表示允许同时上传的最大文件个数

enctype:'multipart/form-data',

validateInitialCount:true,

previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",

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

}).on("fileuploaded", function (event, data, previewId, index){

});

三、Options 说明：

四、提示说明设置：

五、Method说明：

六、常见错误：

(1) 当点击上传后，报错，提示你必须选择最少X个文件上传。

错误原因:html中input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。