bootstrap fileinput插件

引入文件

<link href="${base}css/fileinput.min.css" rel="stylesheet" />
<script src="${base}js/fileinput.min.js"></script>
<script src="${base}js/zh.js"></script>
<script src="${base}js/jquery.form.js"></script>

初始化

function initFileInput() {    
    $("#uploadFile").fileinput({
    	language: 'zh', //设置语言
        showUpload: false, //是否显示上传按钮
        showCaption: false,//是否显示标题
        maxFileSize: 2000,
        browseClass: "btn btn-primary", //按钮样式             
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
    });
}

注：执行初始化方法时，先执行销毁方法

$(function(){ 

<span style="white-space:pre">	</span>

$("#uploadFile").fileinput('destroy');	
	initFileInput();

});

JSP代码

form中添加 enctype="multipart/form-data"

<div class="form-group" style="margin-right:20px;">
				<label class="col-sm-2 control-label">上传附件</label>
				<div class="col-sm-10">
					<input name="uploadFile" id="uploadFile" type="file" multiple type="file">
				</div>
			</div>

ajax不支持文件上传，所以使用引入文件的第四个插件来提交表单

$('#add').ajaxSubmit({
				url : "...",
				type : "POST",
				cache : false,
				data : $('#add').serialize(),
				success : function(data) {
					if (data == "success") {
						layer.alert('消息发送成功！', function() {
							parent.location.reload();
							window.parent.layer.closeAll('iframe');
						});
					}
					if (data == "error") {
						layer.alert('消息发送出错！')
					}

				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					layer.alert("出错啦！");
				}
			})