Ajax上传文件返回参数

￡神魔★判官ぃ 2022-06-10 01:43 222阅读 0赞

代码：

<!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">
    
              
              <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>
    
              
              <h4>或者将文件拖拽到这里</h4>
              <div class="upload-drop-zone" id="drop-zone">
                文件显示
              </div>
    
              
              <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>
    
              
              <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> 
        <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>

截图：

![Center][]

![Center 1][]

[Center]: /images/20220610/5ea41f966faf49079663266c0690ecc7.png
[Center 1]: /images/20220610/0717d6fb9785474fae7957a2143f6feb.png