现在位置首页 / 前端开发 /正文

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

作者: IT小兵 | 2017年1月8日| 热度:℃ | 评论: |参与:

最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的问题。

一、无刷新实现form提交文件

将form的target指向为一个iframe就可以实现无刷新提交文件了,但关键是还需要看到后台返回的数据,所以还需要为该iframe注册一个回调函数,因为iframe和该页面在同域内,所以可以在iframe里可以调用该回调函数,就可以看到后台返回的数据了。实例如下:

<body>
    <form method="post" target="targetFrame" action="#" enctype="multipart/form-data" id="fileupId">
        <input type="file" name="" id="">
    </form>
<script>
    var ifmId = 'targetFrame';
        var iframe = document.createElement("iframe");
        document.body.appendChild(iframe);
        iframe.style.display = "none";
        iframe.contentWindow.name = ifmId;
        iframe.id = ifmId;
        
        iframe.callback = function(json) {
           success && success(json)
    }
</script>
</body>

里面的js的作用主要是创建了一个iframe,并为iframe设置id和name,并为其注册回调函数。另外后台需要注意的有两点:

1.后台返回的数据类型应为html,否则无法在iframe里面显示,举个栗子:<html><script>frameElement.callback({test:'test'})</script></html>

,其中{test:test}应该是后台返回的数据;

2.ngix的http头应将x-Frame-Option设置为SAMEORIGIN,这样使页面可以在同域下能够被iframe调用;

这样一来,一个可以不刷新页面上传文件的功能就做好了,但是我们整个的系统都是ajax完成的,如果临时改成form可能改变很大,那么有没有有个方法可以不用一个个的去改,直接用一个方法就可以将所有的ajax上传的内容都改成form呢

 

二、动态转换所有数据到form表单内,并实现提交;

这个方法总的来说分为三步:1.在打开页面的时候遍历所有需要提交的输入框或者文件上传等内容,并将其每一个添加到动态创建的form表单之中;2.将其中的上传文件按钮绑定表单中的文件上传input;3.当用户点击提交的时候自动填充除了文件外其他的form表单,并提交表单,获取返回数据。

直接看代码:

var newForm = function(){
        
        var conds = $('[data-cond]');
        var formDom = $('<form method="post" style="display:none;" enctype="multipart/form-data" id="fileupId"></form>')
        var textDom = $('<input type="text">');
        var fileDom = $('<input type="file">');
        conds.each(function(i, ele) {
            var _ele = $(ele);
            var key = _ele.data('cond').toString().trim();
            if (_ele.hasClass('select')) {
                //下拉框
                formDom.append($('<input type="text">').attr('name',key));
            }else if (_ele.hasClass('fileUp')) {
                //文件
                formDom.append($('<input type="file">').attr('name',key));
                _ele.on('click',function(){
                    $("input[name="+ key +"]").click();
                })
            }else{
                formDom.append($('<input type="text">').attr('name',key));
            }
        });
        $('body').append(formDom);
        formDom.delegate('input','change',function(){
            var id = $(this).attr('name');
            var files = $(this).get(0).files[0];
            //判断文件类型
            if(!/\.jpg$|\.jpeg$|\.gif|\.png$/ig.test(files.name)){
                        alert('请选择图片文件~')
                return false;
            }
            //判断文件大小
            if(files.size > 20480000){
                 alert('请上传20M内的文件~')
                return false;
            }
            var name = files.name.replace(/(\w{10})(\w+)/,'$1..')
            //文件名筛选只显示前10个字符
            $('#'+id+'').text(name);
        })
        //formDom.hide();
    }

这个方法的目的主要是为了动态创建一个表单,并为html文件中的上传文件按钮与form内的上传文件输入框绑定,实现选择文件的功能,另外还用正则实现了文件类型、大小的筛选并选择性显示文件名的前十个字符,其中$('#'+id+'')就是相应的上传文件按钮,另外为想转换为form表单内的内容的dom添加标签[data-cond="xxx"],通过判断它的类来添加不同的Input。

var form = function(opt){
        console.log()
        var dom = opt.dom;
        var success = opt.success || function() {};
        var preUrl = eking.global.preUrl;
        var postUrl = opt.postUrl || "";
        var iframeName = opt.iframeName;
        var conds = $('[data-cond]');
        var consObj = {};
        
        conds.each(function(i, ele) {
            var _ele = $(ele);
            var key = _ele.data('cond').toString().trim();
            if (_ele.hasClass('select')) {
                //下拉框
                $("input[name="+ key +"]").val(_ele.data('select').getValue());
            }else if (_ele.attr('type') == "text") {
                //文本框
                $("input[name="+ key +"]").val(_ele.val());
            }else if (_ele.attr('type') == "password") {
                //密码框
                $("input[name="+ key +"]").val(_ele.val());
            }else if (_ele.hasClass('span')){
                $("input[name="+ key +"]").val(_ele.text());
            }
        });
        dom.attr({
            target: iframeName,
            action: preUrl + postUrl
        });
        var ifmId = 'targetFrame';
        var iframe = document.createElement("iframe");
        document.body.appendChild(iframe);
        iframe.style.display = "none";
        iframe.contentWindow.name = ifmId;
        iframe.id = ifmId;
        iframe.callback = function(json) {
           success && success(json)
           $("#targetFrame").remove();
        }
    }

第二个函数就和我们一开始介绍的方法类似,不过将其进行了封装,添加了几个参数dom、success、preUrl、postUrl、iframeName,其中两个url是为了设置form表单提交的地址,dom则是在第一个函数中创建form表单,success则是数据传输后的回调函数。

在目标页面刚打开时调用第一个函数,当用户点击提交时,调用第二个函数就可以实现转换输入内容到form表单中并进行提交 :)


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询