文件上傳組件fileinput的使用

1.引入相應的css,js文件。注意jquery,bootstrap,fileinput之間的版本，有些版本之間不兼容會無效果，最好使用官網例子使用的版本。

<link href="webjars/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="webjars/bootstrap-fileinput/4.3.5/css/fileinput.min.css" rel="stylesheet">
<script type="text/javascript" src="webjars/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap-fileinput/4.3.5/js/locales/zh.js"></script>

2.html代碼

<div class="modal fade" id="userModal">
  	<div class="modal-dialog">
  		<div class="modal-content">
  			<div class="modal-header">
  				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  				<h4 class="modal-title" id="myModalLabel">文件上傳</h4>
  			</div>
  			<div class="modal-body">
  				<div class="container-fluid">
  					<label class="control-label">選擇文件</label>
					<!-- multiple:表示同時能夠上傳多個 -->
					<input type="file" name="file" class="form-control" id="projectfile" multiple value="${deal.image}" />
	  				<hr>
  				</div>
  				<div class="alert alert-warning alert-dismissible" role="alert" id="saveMsg" style="display: none">
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				  <strong>提示:</strong> 請選擇文件並上傳文件後再保存
				</div>
  			</div>
  			<div class="modal-footer">
  				<button type="button" class="btn green" id="batchSaveUser">保存</button>
  			</div>
  		</div>
  	</div>
  </div>

3.js代碼

$('#projectfile').fileinput({
        language: 'zh',
        uploadUrl: $("#contextPath").val() + "/admin/permissions/user/upload",
        allowedFileExtensions : ['xlsx', 'xls'],
        showUpload: true,
        fileActionSettings: {showUpload: false}
    });
	//文件上傳後執行的方法
	$('#projectfile').on('fileuploaded', function(event, data, previewId, index) {
	    var form = data.form, files = data.files, extra = data.extra,
	        response = data.response, reader = data.reader;
	    $("#uploadFileName").val(response.fileName);
	});

能夠經過fileuploaded事件，監聽得到文件上傳成功後，後臺請求返回的數據。