使用jquery提交FormData数据

Posted zhao1949

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jquery提交FormData数据相关的知识，希望对你有一定的参考价值。

https://blog.csdn.net/u011500781/article/details/54931716

http://yunzhu.iteye.com/blog/2177923

***********************************************

<!doctype html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf8">
    <script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
    <form id="form">
        <input name="file" type="file" />
        <input name="a" value="1" />
        <input value="2" />
    </form>
    <button>提交</button>
</body>
</html>
<script>
    $(function() {
        // 监听上传进度
        var xhrOnProgress = function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== ‘function‘)
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }

        $(‘button‘).on(‘click‘, function() {
            var formData = new FormData($(‘#form‘)[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData
            formData.append(‘b‘, 3);// 还可以添加额外的表单数据

            $.ajax({
                type: ‘post‘,
                url: ‘../../../material/jQueryFileUpload?type=1‘,
                data: formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)
                xhr: xhrOnProgress(function(e){// (详见：#3)
                    var percent=e.loaded / e.total;//计算百分比
                    $(‘body‘).append(‘->‘+ percent);
                }),
                success: function(data) {
                    $(‘body‘).append(‘完成‘);
                }
            })
        })
    })
</script>

 

以上是关于使用jquery提交FormData数据的主要内容，如果未能解决你的问题，请参考以下文章

JQuery中使用FormData异步提交数据和提交文件

jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

jQuery中FormData的使用

从javascript函数创建的表单提交FormData到php

在 Spring Boot App 中使用 Jquery 和 FormData 提交表单字段并上传 File 到 Spring MVC Controller

使用 FormData 和 jQuery 上传 Ajax 大文件无法发布数据