最近在做项目的时候遇到一个需要上传文件的需求，因为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. mac工具收藏

    1.office字体兼容 http://mac.pcbeta.com/thread-32703-1-1.html

  2. 一个优秀windows C++程序员的知识体系

    思考一个优秀windows C++ 程序员该有哪些知识,可最终发现什么知识都不能少, 看下图: 除了上面知识,程序员还要不断学习, 保持对新知识的热情. 转自http://www.cppblog.co ...

  3. JVM中的Stack和Frame

    JVM执行Java程序时需要装载各种数据,比如类型信息(Class).类型实例(Instance).常量数据(Constant).本地变量等.不同的数据存放在不同的内存区中,这些数据内存区称作“运行时 ...

  4. linux C++ 获取文件绝对路径

    提供ftp服务时需要获取文件绝对路径,这里记录一下. #include <stdlib.h> #include <stdio.h> #include <limits.h& ...

  5. C#--GDI+的LinearGradientBrush类

    命名空间:System.Drawing.Drawing2D LinearGradientBrush对象用颜色线性渐变填充图形.简言之,颜色渐变包含一种在两种指定的颜色之间渐变的颜色,渐变的方向是沿着指 ...

  6. 2014 Hangjs 见闻流水账第一天

    前言 6月21日~6月22日, 第一次跑远门去参加一个大会(广州 -> 杭州),本来打算,在火车的回来的路上,把这两天的东西记录一下,不过,火车上的环境实在恶劣,同时也高估了自己的专注力,所以, ...

  7. 【实用技巧】取消Win7开机账户的手动选择

    因为前面碰到的一些事情,稍有感慨. 关于win7的一些小技巧都不是什么很有技术含量东西,或者说很浅显.我说一个技巧,也许很多人都知道,也许也早有人说过.但我想说的是我不是在炫耀什么,我只是想分享一些我 ...

  8. MongoDB副本集配置系列八：MongoDB监控

    1:Mongostat MongoDB2.6版本 MongoDB3.0版本 2:db.setProfilingLevel(2):打开profiler 类似于MySQL的slow log Profile ...

  9. [Aaronyang] 写给自己的WPF4.5 笔记22 [3d交互与动画 3/4]

    OK,前面我们的3d模型都比较囧啊,最近也看了一点ZAM了解了一下,大致至少可以做个简单的模型用来演示. 1.交互,动起来的思路 ①修改Model3D对象的变换 ②修改应用于ModelVisual3D ...

  10. java知识大全积累篇

    原文出自:http://www.importnew.com/14429.html 构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使 ...