zoukankan      html  css  js  c++  java
  • js无刷新上传文件

    传统的文件上传方式

    <form action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit"/>
    </form>

    在执行上传后,页面会跳转到action指定的地址。

    一般用户需要使用无页面刷新的上传方式上传文件,此时可采取iframe的方式,将form表单提交后的返回内容,重定向到iframe中。

    修改后的代码为

    <form action="" method="POST" target="target" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit"/>
    </form>
    
    <iframe name="target" id="target" frameborder="0" width="0" height="0"></iframe>
    
    <script>
        var iframe = document.getElementById("target");
        var uploadCallback = function () {
            console.log(iframe.contentDocument.body.innerHTML);
        };
        iframe.onload = uploadCallback;
    </script>

    利用iframe的onload事件,检测是否传输完毕,并获取传输后的服务端返回值。

    示例非常简单,会有浏览器不兼容的情况,但上传插件的基本思想如此。

    此外还有swf方式的实现方式,可现实上传速度以及进度等信息。

  • 相关阅读:
    Linux中$含义
    Linux文本处理之grep
    MySQL8.0.15的安装与配置---win10
    Jenkins实现自动运行jmeter脚本
    Hystrix初识
    Feign初始
    AS的Gradle下载不成功
    Linux安装一些软件
    OAuth2初识
    IDEA无法打开等奇异问题终极解决方法
  • 原文地址:https://www.cnblogs.com/mahuan2/p/6001447.html
Copyright © 2011-2022 走看看