代码：
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
<Meta charset="utf-8"/>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
/* layout.css Style */
.upload-drop-zone {
height: 200px;
border-width: 2px;
margin-bottom: 20px;
}
/* skin.css Style*/
.upload-drop-zone {
color: #ccc;
border-style: dashed;
border-color: #ccc;
line-height: 200px;
text-align: center
}
.upload-drop-zone.drop {
color: #222;
border-color: #222;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading" style="text-align: center;"><strong>上传文件</strong></div>
<div class="panel-body">
<!-- Standar Form -->
<h4>请选择文件</h4>
<form enctype="multipart/form-data" id="form">
<div class="form-inline">
<div class="form-group">
<input type="file" name="file" id="file" multiple>
</div>
<button type="button" class="btn btn-sm btn-primary" id="upload">上传</button>
</div>
</form>
<!-- Drop Zone -->
<h4>或者将文件拖拽到这里</h4>
<div class="upload-drop-zone" id="drop-zone">
文件显示
</div>
<!-- Progress Bar -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valueNow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">已上传 50% </span>
</div>
</div>
<!-- Upload Finished -->
<div class="js-upload-finished">
<h3>已上传文件</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a>
<a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-02.jpg</a>
</div>
</div>
<div id="list" class="list">
<div id="left" class="left"></div>
<div id="right" class="right"></div>
</div>
</div>
</div>
</div> <!-- /container -->
<script>
$(function () {
var btn = $("#upload");
btn.click(function () {
$.ajax({
type : "POST",//提交的请求类型
cache: false,//是否缓存
url : "http://121.14.117.219:8080/KNowledgeServer/api/fileImportMod/fileUpload",//提交的URL路径
dataType : "json",//返回的数据类型
data : new FormData($('#form')[0]),//提交的数据
processData: false,//是否处理转化成一个查询字符串
contentType: false,//发送信息至服务器时内容编码类型
success: function (json) { // 上传成功，数据返回
var fileName = getDataname(json.msg); //过滤点返回数据的不必要字符
$("#left").html("");
$("#left").append(json.code + "<br/>" + fileName);
//WebSockettest();
$("#file").html("");
},error: function(msg) {
alert("出错了，请重新加载！");
}
});
});
});
function getDataname(dataname){ //获取数据
var pos=dataname.lastIndexOf("/");//查找最后一个\的位置
return dataname.substring(pos+1); //截取最后一个\位置到字符长度，也就是截取文件名
}
</script>
</body>
</html>
截图：