最近在做项目的时候遇到一个需要上传文件的需求，因为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表单中并进行提交 :)

js实现无刷新表单提交文件，将ajax请求转换为form请求方法的更多相关文章

  1. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  2. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  3. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  4. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 传统表单提交文件上传，以及FormData异步ajax上传文件

    传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...

  6. MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

    假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...

  7. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  8. 输入值/表单提交参数过滤有效防止sql注入的方法

    输入值/表单提交参数过滤,防止sql注入或非法攻击的方法:  代码如下: /** * 过滤sql与php文件操作的关键字 * @param string $string * @return strin ...

  9. php+mysql 除了设置主键防止表单提交内容重复外的另一种方法

    感觉好久没有更新博客了,一直在做网站及后台,也没有遇到让我觉得可以整理的内容,之前做的一个系统,已经完成了,后来客户又要求加一个功能,大概就是表单提交的时候,约束有一项不能和以前的内容重复,如图 比如 ...

随机推荐

  1. Python错误、调试和测试

    try: print('try...') r = 10 / int('a') print('result:', r) except ValueError as e: print('ValueError ...

  2. php类自动装载、链式操作、魔术方法

    1.自动装载实例 目录下有3个文件:index.php load.php tests文件夹 tests文件夹里有 test1.php <?php namespace Tests; class T ...

  3. SQL Developer 4.0 启动报错“unable to create an instance of the java virtual machine located at path”

    安装了Oracle之后,第一件事情就是想想怎么去连接,进而操作.SQL Developer是官方提供的强大工具,个人看来也是第一选择. 目前官网提供的最新版是4.0.1.14.48,下载下来之后,就跃 ...

  4. JAVA “Run as administrator” “UAC disabled” alternative solution

    Technorati 标签: psexec,run as administrator,UAC java.io.IOException: Cannot run program "psexec. ...

  5. linux系统下重启tomcat的shell脚本

    linux系统下重启tomcat的shell脚本: #!/bin/shtomcat_home=/opt/apache-tomcat- #找到tomcat进程的id并kill掉 ps -ef |grep ...

  6. 结合Domino打造全功能的Grid

    1.       需求说明: 在domino开发中我们经常会遇到表单上需要一个类似table的组件,你可以增删改等.比如我有一个张报核单据,上面需要详细列出每项金额的明细,我们先看完成后的效果: 上面 ...

  7. RabbitMQ的安装使用

    1.下载安装 Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装RabbitMQ之前要先安装Erlang. erlang:http://www.erlang.org/downloa ...

  8. icmp,tcp,traceroute,ping,iptables

    有东莞的监控主机到北京BGP出问题了: 报警短信疯狂发送: 找东莞IDC和北京BGP服务商协查: 有个奇怪的问题:北京到东莞trcaceroute都有路由信息 东莞143段到北京全无路由信息:但,东莞 ...

  9. 如何提高nodejs程序的稳定性，健壮性

    在网上看到一些帖子,吐糟,质疑nodejs 程序的稳定性,为什么呢?其一,可能这个和javascript有关吧,node是拿javascript去实现的,而javascript又被称为是“世界上误解最 ...

  10. GridView第一个Item中的CheckBox不工作

    问题:如题 解决办法: 修改后: ViewGroup.LayoutParams params =helper.getConvertView().getLayoutParams(); params.wi ...