Ajax上传文件返回参数

来源：互联网发布：淘宝固定背景怎么设置编辑：程序博客网时间：2024/06/15 12:32
代码：
<!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>
截图：
阅读全文
0 0