from表单和iframe实现无刷新上传文件

╰半橙微兮° 2023-10-30 07:55 215阅读 0赞

#### 在html界面中完成类似ajax方式的上传方式，这种方式的可以通过form+iframe的方式实现，我们通过form表单提交，将数据都输出到iframe上，然后获取里面的json数据，转化为json对象，然后获取里面的信息，设定到界面上。 ####

### 前端页面  ###

#### 因为文件上传加了CSS样式可以忽略最主要的标记了颜色 ####

<iframe  name="ifram" id="ifram" width="0" height="0"></iframe>
    
    <form action="/user/upload" method="post" enctype="multipart/form-data" id="from" target="ifram">
        <a href="javascript:void(0)" class="a-upload" id="clickFile1">
        <input type="file" name="filename" id="file1"/>选择文件
        </a>
        <span class="bb" id="span1">请上传****格式</span>
        <input type="button" id="buut" value="上传文件">
    </form>

#### js文件 ####

<script>
        $(function () {
            $("#buut").click(function () {
                $('#from').submit();
            });
        });
    
    后面这段主要是监听iframe里面内容的变化来获取从后台返回来的内容
        //监听frame的 onload方法
        var oFrm = document.getElementById("ifram");
        oFrm.onload = oFrm.onreadystatechange = function() {
            if (this.readyState && this.readyState != "complete") return;
            else {
                //获取iframe里面的内容
                var responseText = $('#ifram')[0].contentDocument.body.textContent;
                //上传完成后的处理
                if(responseText!= ""){
                    var responseData = JSON.parse(responseText);
                    console.log(responseData);
                   alert(responseData.msg);
                }
            }
        }
    </script>

虽然参考别人的但自己测试了一下可以

技术支持：[https://blog.csdn.net/yelllowcong/article/details/78604879][https_blog.csdn.net_yelllowcong_article_details_78604879]

[https_blog.csdn.net_yelllowcong_article_details_78604879]: https://blog.csdn.net/yelllowcong/article/details/78604879

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe无刷新提交表单

看懂下面的代码你就知道了 <iframe name="send" ></iframe> <form action=a.php tar

忘是亡心i/ 2024年01月30日 00:37/ 0 赞/ 32 阅读

相关 from表单和iframe实现无刷新上传文件

在html界面中完成类似ajax方式的上传方式，这种方式的可以通过form+iframe的方式实现，我们通过form表单提交，将数据都输出到iframe上，然后获取里面的js

╰半橙微兮°/ 2023年10月30日 07:55/ 0 赞/ 216 阅读

相关模拟ajax无刷新上传文件

转自：http://www.iteye.com/topic/81120 首先要说的就是 ajax 是无法实现上传文件的，可以想一下ajax与后台通信都是通过传递字符串，怎么

淩亂°似流年/ 2022年08月11日 07:30/ 0 赞/ 179 阅读

相关仿ajax 无刷新上传文件(如头像上传等)

我们知道，js及ajax是无法操作文件的，当然，现在新出的xhr2标准已经包含文件上传API，但是，毕竟是新标准，那些老旧的浏览器，依然不支持，我们不能强制要求

刺骨的言语ヽ痛彻心扉/ 2022年08月10日 11:51/ 0 赞/ 205 阅读

相关 php无刷新上传图片

1. 引入文件  <script type="text/javascript" src="/js/jquery.form.j

喜欢ヅ旅行/ 2022年08月09日 00:58/ 0 赞/ 264 阅读

相关 html使用iframe实现伪异步表单，实现无刷新上传文件时遇到的问题

html使用iframe实现伪异步表单，实现无刷新上传文件时遇到的问题最近发现原有老系统框架只支持对单表单（单form）的数据进行提交处理，不支持多个表单一起提

淩亂°似流年/ 2022年07月21日 01:47/ 0 赞/ 72 阅读

相关无刷新上传文件

关于不刷新页面提交表单数据，以前只知道使用ajax的方法，昨天用ajax实现这个功能时，遇到一个问题，表单中有文件域，ajax的方式不能上传文件，除非用js传输文件流。（这是我

梦里梦外;/ 2022年06月16日 13:44/ 0 赞/ 244 阅读

相关 ajax无刷新上传文件

详细的解释都在注释里面了，注意一点XMLHttpRequest : 增加很多功能，他不推荐使用onreadystatechange这个事件来监听，推荐使用onload 所以我

落日映苍穹つ/ 2022年05月28日 09:16/ 0 赞/ 224 阅读

相关 form表单无刷新提交

最近在处理一个界面，界面中有实时统计数据量的websocket,还有一个下载文件功能，下载采用的是form表单提交的方式，而正常的form表单提交势必会引起页面刷新（隐藏的），

清疚/ 2022年03月06日 09:00/ 0 赞/ 401 阅读

相关文件的上传（表单上传和ajax文件异步上传）

一.表单上传： html客户端部分： <form action="upload.ashx" method="post" enctype="multipart/f

亦凉/ 2021年06月26日 16:06/ 0 赞/ 659 阅读