利用jquery&iframe标签实现页面无跳转的表单文件上传

最近公司项目修改上传文件效果，大致效果就是上传文件提交时不能进行页面跳转，然后最好是没有提交按钮，用jquery实现表单的提交。想了想，用ajax好像不太好实现这种效果了，首先是ajax如何把上传的文件传递给后台就遇到了瓶颈；其次再是如何配合ajax实现jquery提交表单，最后在网上查了下资料，用iframe标签来实现会非常的方便。

---

实现步骤

• 首先在页面上写上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提交。