环境至少需要:
fileinput.min.js
fileinput.min.css
选用：
zh.js
demo:
$("#uploadFile").fileinput({
showUpload: true, //是否显示上传按钮
showCaption: true, //是否显示标题,
showCancel:false,
showPreview: true, //是否预览
allowedPreviewTypes:false,
maxFilesNum :5,
elErrorContainer: '#kartik-file-errors',
uploadUrl: '/gqQuotation/imageUpload', //上传的地址
previewFileIconSettings: { //预览时,图标显示的样式
'docx': '<i class="fa fa-file-word-o text-primary"></i>',
'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
'sql': '<i class="fa fa-file-word-o text-primary"></i>',
},
maxFileSize : 1000,
//上传文件最大的尺寸
maxFilesNum : 1,
//上传最大的文件数量
uploadExtraData:function (previewId, index) {
//注意这里，传参是json格式,后台直接使用对象属性接收，比如employeeCode，我在RatingQuery 里面直接定义了employeeCode属性，然后最重要的也是
//最容易忽略的，传递多个参数时，不要忘记里面大括号{}后面的分号，这里可以直接return {a:b}; 或者{a:b}都可以，但必须要有大括号包裹
var data = {
quotationNo : $("#quotationNo").val()
};
return data;
},
layoutTemplates :{
// actionDelete:'', //去除上传预览的缩略图中的删除图标
actionUpload:'',//去除上传预览缩略图中的上传图片；
actionZoom:'' //去除上传预览缩略图中的查看详情预览的缩略图标。
}
});
$("#uploadFile").on("fileloaded", function(event, file,previewId,index,reader) { //加载文件是触发
var sizeMB=file.size/1000000;
if(sizeMB>20){
dialog.confirm({
content:"文件名： '"+file.name +"' 大小超过20MB， 是否繼續上傳？" ,
onCanceleBefore:function(){
$("#"+previewId).find(".kv-file-remove").click();
}
})
}
});
官网地址：http://plugins.krajee.com/file-input