代码：
<!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>
截图：
原文链接：https://www.f2er.com/ajax/160861.html
