Ajax serialize()提交form表单不能上传file类型怎么办？

曾经终败给现在 2022-05-10 03:52 222阅读 0赞

2018年01月03日 16:02:31 [Wikey丶][Wikey] 阅读数：2514 标签： [ajax ][ajax][jquery ][jquery][表单 ][Link 1] 更多

个人分类： [web开发之行 ][web_][前端艺术修炼 ][Link 2]

**前台form表单的提交方式有很多种，例如：**   
1. form表单submit直接提交的方法   
2. Ajax提交的方法   
3. jquery提交的方法   
4. 原生js提交的方法

**每一种方法都有它的优势和不足，有的简单直接，有的写起来复杂，但用起来顺手，最近项目中遇到了一个Ajax 表单提交问题，在这里总结一下ajax提交的两种方式：**

**1.serialize() 方法：**

通过序列化表单值，创建 URL 编码文本字符串。我们可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。   
所用到的语法为：

$("form").serialize()

这里的$(“form”)操作对象是代表表单元素集合的 jQuery 对象，而不是js对象。

提交方法的代码段：

$('form').submit(function() {
      alert($(this).serialize());
      return false;
    });

*  化后，表单中数据会一下面这种方式提交到后台：a=1&b=2&c=3&d=4&e=5   
    这种方式处理表单时所适用的input标签类型是有限的，只适用于一些常用的类型例如text、checkbox、select、date等等，但是对于file文件类型的input框并不适用，那我们在用到ajax提交方式的时候应该如何提交file类型的input框数据呢?

**2.封装FormData 对象，直接用$.ajax提交**

论坛上有人提及到FormData的封装方式，将form表单中的内容封装成formdata的数据格式   
FormData 对象可以把form中所有表单元素的name与value组成一个queryString，提交到后台，在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

FormData的使用方法也是非常简单，直接传入form表单对象即可，如下：

var form = $('#form1');  
    var formdata = new FormData(form);

使用这种方式将数据封装后，file类型的文件数据即可以键值对的方式封装在formdata中，然后用ajx提交，方法如下：

$.ajax({  
            type : "POST",  
            url : "houtai/123.do",  
            data : formData,
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,
            success : function(msg) {  
                if(msg){
                alert('提交成功！');
                } 
            }  
    });

有一点需要注意的是，以formdata的方式提交时需要添加async: false, 同步，否则后台无法接收到前台传过来的file文件数据，这样的提交方式，既可以提交任何一种type类型标签，又可以在提交之后得到返回结果，方便快捷又实用。

关于form表单提交的方式还有很多很多，本文只是关于ajax的两种提交方式总结，希望以后还可以遇到更好用的提交方式或者提交插件。

好久没写总结博客了，希望2018年可以坚持下去！！

[Wikey]: https://me.csdn.net/NTSDB
[ajax]: http://so.csdn.net/so/search/s.do?q=ajax&t=blog
[jquery]: http://so.csdn.net/so/search/s.do?q=jquery&t=blog
[Link 1]: http://so.csdn.net/so/search/s.do?q=%E8%A1%A8%E5%8D%95&t=blog
[web_]: https://blog.csdn.net/NTSDB/article/category/6681373
[Link 2]: https://blog.csdn.net/NTSDB/article/category/7107594