JQuery--关于jquery的 $("form").serialize()和 new FormData表单序列化

48 阅读 0 评论 32 点赞

我是靠谱客的博主欢呼大侠，最近开发中收集的这篇文章主要介绍JQuery--关于jquery的 $("form").serialize()和 new FormData表单序列化，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别

首先，前者，只能序列化表单中的数据，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了，

new FormData使用需要有一个注意点，

注意：对于jquery的要求是，好像是版本1.8及其以上方可支持。

另外该对象不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）；

//提交文件
    function submitFile() {
        $('.btn-publish').click(function () {
            //var title = $('.txt-video-title').val();
            var uploadFormData = new FormData($('#uploadForm')[0]);//序列化表单，$("form").serialize()只能序列化数据，不能序列化文件
            $.ajax({
                type: 'POST',
                data: uploadFormData,
                url: '/Artical/Publist',//TypeError: 'append' called on an object that does not implement interface FormData.
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    if (typeof (data) == undefined) {
                        alert("用户信息已丢失，请重新登录！"); window.parent().location.href = "/Account/Login";
                    }
                    if (data.ErrorMsg == "") {
                        alert('美文发布成功！');
                    } else { alert(data.ErrorMsg); }
                }
            });

        });
    }