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

在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