Bootstrap FileInput 整理和使用心得

下载地址、API和DOM地址（英语好的小伙伴可以看看）
下载地址：https://github.com/kartik-v/bootstrap-fileinput
API文档 ：http://plugins.krajee.com/file-input
DEMO：http://plugins.krajee.com/file-input/demo

一、引入文件

<link href="../css/bootstrap.min.css"rel="stylesheet">
<link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />
<scriptsrc="../js/jquery-2.0.3.min.js"></script>
<script src="../js/fileinput.js"type="text/javascript"></script>
<script src="../js/bootstrap.min.js"type="text/javascript"></script>

二、初始化设置

<input type="file" class="form-control" id="licensePic1" name="licensePic1">

initFileInput("licensePic1");
function initFileInput(ctrlName) {
		    var control = $('#' + ctrlName);
			word = ctrlName.substring(0,ctrlName.length-1);
			control.fileinput({
				language: "zh",//配置语言
				browseLabel: "上传",
				browseClass: "btn btn-default trans", //按钮样式
				showUpload : false, //显示整体上传的按钮
				showRemove : false,//显示整体删除的按钮
				uploadAsync: true,//默认异步上传
				uploadLabel: "上传",//设置整体上传按钮的汉字
				removeLabel: "移除",//设置整体删除按钮的汉字
				autoReplace: true,//是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉
				overwriteInitial: true,
				showUploadedThumbs: false,
				uploadClass: "btn btn-primary",//设置上传按钮样式
				showCaption: false,//是否显示标题
				dropZoneEnabled: false,//是否显示拖拽区域  
				uploadUrl: '<%=basePath%>/fileUpload',//这个是配置上传调取的后台地址
				uploadExtraData:function(){//向后台传递参数
	            var data={
	                orderNum:$("#orderNum").val()
	                };
	                return data; 
	            },
				//minImageWidth: 50, //图片的最小宽度
				//minImageHeight: 50,//图片的最小高度
				//maxImageWidth: 1000,//图片的最大宽度
				//maxImageHeight: 1000,//图片的最大高度
				initialPreview:[
					"<img style='width: 160px;height: 240px' src='"+"<%=basePath%>/showImg?orderNm=${applePay.orderNo }&word="+word +"'/>",
					],  //要回显的图片的路径
				maxFileSize : 2048,//文件大小限制
				maxFileCount: 1,//允许最大上传数，可以多个，
				enctype: 'multipart/form-data',
				allowedFileExtensions : ["jpg", "png"],/*上传文件格式限制*/
				msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
				showBrowse: true,
				browseOnZoneClick: true,
				layoutTemplates:{//不显示删除按钮
					actionDelete:'',
				},
				slugCallback : function(filename) {
					return filename.replace('(', '_').replace(']', '_');
				}
			}).on("filebatchselected", function(event, files) {
	            $(this).fileinput("upload");  
	        }).on('fileuploaded', function(event, data, previewId, index) { //上传成功后调用  上传完给对应上传input赋值
				if(data.response.rspCd != '0000'){
					$.message({
						message:data.response.rspDesc,
						type:'error'
					});
				}
				var inputName = data.response.inputName;
				var inputid = inputName.substring(0,ctrlName.length-1);
				$('#' + inputid).val(data.response.imgName);
				//$('#'+ctrlName+'1').addClass('hide').removeClass('show');
			}).on('change', function (event) {//同一input 换上传的图片时触发
	            //alert(currInput);
	        }).on("filecleared",function(event, data, msg){//删除上传的图片时触发
	        	$('#' + currInput).val("");
	        	//$('#'+ctrlName+'1').addClass('show').removeClass('hide');
	    	});
		}