实现步骤

  • 首先在页面上写上iframe标签，并将iframe标签的style设置为“display：none”，而且将iframe标签的name属性设置为，这里我们就将iframe标签的name属性设置为disIframe
  • 其次，将文件上传表单的target属性设置为iframe标签设置的name属性值，上边我们已经设置为disIframe
  • 再就是我们给文件上传的form设置一个id ,这里我们设置为fileupload,利用jquery的id选择器得到这个form,并调用其submit方法就可以得到在jquery中不跳转页面提交文件上传表单
  • 最后，可以判断通过提交给iframe标签的内容来执行相应操作

就单单看iframe执行的这个逻辑，我们就可以看出其实执行逻辑和ajax似乎没有区别，的却，在ajax还没有火起来的时候，都是用iframe来执行类似于ajax的功能的。

详细说明


  • iframe标签的设置
<iframe style="display: none" id="disIframe" name="disIframe"></iframe>



  • form表单的设置
<form  id="fileupload" action="report/singlecheckupload.koala" method="post" enctype="multipart/form-data" target="disIframe">

<input type="file"  name="file">

</form>
  • 顺便提一下，form提交上传文件必须将enctype设置为multipart/form-data
  • jquery代码实现提交表单
$("#fileupload").submit();
  • 我将这个代码写在另一个标签的click方法内，当点击那个标签时就会执行这一个方法。
  • 通过iframe标签中的返回内容执行相应操作
$("#disIframe").load(function() {
            var body = $(window.frames['disIframe'].document.body);
            console.log(body);

            if (body[0].textContent == "success") {
            }
        });

在访问上边form的action的时候，可能会返回success，可能会返回error，通过判断body[0].textContent值来执行form提交完成后的代码逻辑。

总结

iframe加上jquery提交可以实现页面无跳转，不必要单独去点击form的提交按钮去执行form提交。