iframe模拟无刷新上传文件

    之前上传文件用form表单上传,虽然能够用,可是会闪一下,有点丑,就去找ajax上传文件的插件,看着有点麻烦,就想换别的方法,看到还有用iframe的,就本身试着上传,最后成功了.如今把它写出来,但愿能给须要的人一点帮助.

我作的是java web项目,前端是 jsp 页面.

<form id="imgForm" enctype="multipart/form-data" action="url" method="post"  target="image_iframe">

     <input type="file" onchange="uploadFile(this)" id="file" name="file" >
</form>

 

<iframe id="image_iframe" name="image_iframe" style="display:none;">
 </iframe>

重点在  iframe 的target 属性,我忘记它对应的是iframe 的id 仍是name.总之同样就好.必定要写!!!!

当文件选定,而且符合条件以后,就能够  $("#imgForm").submit() .开始form表单提交.因为有iframe,因此form表单里的东西会在iframe中上传,页面不会闪.

在后台,和用form表单上传同样,进行文件的读写.当文件复制成功以后.须要获得:

PrintWriter out = response.getWriter(); 

out.println("<script>parent.callbackHeadImg('"+url+"')</script>");  

在iframe中,就会输出 <script>parent.callbackHeadImg(url)</script>

他就会去调用你文件上传那里的  function callbackHeadImg(msg){

XXXX

}这个方法.

我用的java,springMVC框架.方法返回值是Object 类型,我返回null,效果以下图

才成功调用了callbackHeadImg函数

其余的返回值,若是是个具体路径,路径所在页面就会出如今上传的iframe中,以下图.

但愿能帮到须要的人.