使用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>