上传文件之后如何停留在原来的页面

上传文件一般在form中完成，前台代码如下所示：

<form id="fileForm" name="fileForm" class="w-form" method="post" action="/xxx/yyy/" enctype="multipart/form-data"  >

                            <div class="from-one ">
                                <div class="from-one-main box-flex input-append" style="justify-content: space-around">
                                    
                                    <span class="width:150px">
                                       <a href="ddd/ttt.xls" >下载模板</a>
                                    </span>
                                    <span class="width:350px">
                                         <label for="inFile">请选择要导入的文件：</label>
                                         <input id="inFile"  name="inFile" type="file" class="w-fileinput" style="width: 300px;"/>
                                     </span>
                                    <span class="width:150px">
                                         <button type="submit" class="btn btn-primary btn-primary-ts" style="width:100px" id="batchSubmit" >确认</button>
                                     </span>
                                </div>
                            </div>
                    </form>

　　后台代码大概如下所示：

@RequestMapping(value = "/yyy",method= RequestMethod.POST)
    @ResponseBody
    public String recalculateBatch(MultipartHttpServletRequest request){
        MultipartFile fileFile = request.getFile("inFile");
        String filePath = ResourceUtil.upload(fileFile);
        File excelFile = VFSUtil.getFile(filePath);
        //...
        return "some contents";
}

　　这么写的问题是，当前台的文件上传之后，前台确定之后，后台执行完文件上传和其他动作之后，会在一个新的页面中展示“some contents”，这不是我们想要的。

如果想要在文件上传之后，停留在原来的页面，可以这样做。将这个form表单中的submit换成button，在button上面绑定一个函数，这个函数上面有一个轮询处理后端返回结果的函数，如果后台返回就可以将这个返回放到一个iframe中去，这样就可以使得页面还停留在原来的页面。

前台代码如下：

<form id="fileForm" target="uploadFrame" name="fileForm" class="w-form" method="post" action="/mot_front_new/batchBussinessController/recalculateBatch" enctype="multipart/form-data"  >

                            <div class="from-one ">
                                <div class="from-one-main box-flex input-append" style="justify-content: space-around">
                                    <span class="width:350px">
                                    <label for="buisitype">订单编号：</label>
                                    <select class="select-bn" name="buisitype" id="buisitype">
                                      <option value="5" >佣金重算</option>
                                    </select>
                                    </span>
                                    <span class="width:150px">
                                       <a href="templete/module/recalculate/recalculateTemplate.xls" >下载模板</a>
                                    </span>
                                    <span class="width:350px">
                                         <label for="inFile">请选择要导入的文件：</label>
                                         <input id="inFile"  name="inFile" type="file" class="w-fileinput" style="width: 300px;"/>
                                     </span>
                                    <span class="width:150px">
                                         <button type="button" class="btn btn-primary btn-primary-ts" style="width:100px" id="batchSubmit" >确认</button>
                                     </span>
                                </div>
                            </div>
                    </form>


             <iframe name="uploadFrame" frameborder="0" height="20px"></iframe>

　　在html中包含的js内容如下：

$("#batchSubmit").on('click',function () {

    $("#fileForm").submit();
    var t = setInterval(function () {
        let backStr = $("iframe[name='uploadFrame']").contents().find("body").text();
        if( backStr == "batchOK" ){
            alert("提交成功");
            $("iframe[name='uploadFrame']").contents().find("body").text("");
            clearInterval(t);
        }

    },1000);

})

　　这样的话，在后台返回数据之后，就会转到iframe中，也可以将其进行清除。这样就可以做到不跳转页面了。