文件上传FormData

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">用户头像上传</h4>
        </div>
        <div class="modal-body">
            <section class="panel">
                <div class="panel-body">
                    <form role="form" id="avatarFileForm" enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="fileupload fileupload-new"
                                    data-provides="fileupload">
                                    <div class="fileupload-new thumbnail"
                                        style=" 200px; height: 150px;">
                                        <img src="images/default.jpg" alt="默认头像"
                                            th:src="@{images/default.jpg}" />
                                    </div>
                                    <div class="fileupload-preview fileupload-exists thumbnail"
                                        style="max- 200px; max-height: 150px; line-height: 20px;"></div>
                                    <div>
                                        <span class="btn btn-default btn-file"> <span
                                            class="fileupload-new"><i class="fa fa-paper-clip"></i>选择图片</span>
                                            <span class="fileupload-exists"><i class="fa fa-undo"></i>
                                                更换</span> <input class="default" id="userAvatar" name="file"
                                            type="file" />
                                        </span> <a href="#" class="btn btn-danger fileupload-exists"
                                            data-dismiss="fileupload"><i class="fa fa-trash"></i> 移除</a>
                                    </div>
                                </div>
                                <br /> <span class="label label-danger ">NOTE!</span> <span>
                                    1、缩略图仅支持最新的Firefox，Chrome，Opera，Safari和Internet Explorer 10 <br />
                                    2、仅支持 .jpg、.jpeg或.png的图片格式!
                                </span>
                            </div>
                        </div>


                    </form>
                </div>
            </section>

        </div>
        <div class="modal-footer">
            <button id="reset" type="button" class="btn btn-default"
                data-dismiss="modal">关闭</button>  <!-- data-dismiss="modal" 点击完模态框消失 -->
            <button id="saveButton" type="button" class="btn btn-primary">提交</button>
        </div>
    </div>
</div>
<!--file upload-->
<link rel="stylesheet" type="text/css"
    href="css/bootstrap-fileupload.min.css" />
<!--file upload-->
<script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var userId = [[${userId}]];
    $('#avatarFileForm').bootstrapValidator(
            {
                message : 'This value is not valid',
                feedbackIcons : {
                    valid : 'glyphicon glyphicon-ok',
                    invalid : 'glyphicon glyphicon-remove',
                    validating : 'glyphicon glyphicon-refresh'
                },
                fields : {
                    file: {
                        validators: {
                            notEmpty: {
                                message: '上传图片不能为空'
                            },
                            file: {
                                extension: 'png,jpg,jpeg',
                                type: 'image/png,image/jpg,image/jpeg',
                                message: '图片格式仅支持png,jpg,jpeg'
                            }
                        }
                    }
                }
                
            });

    $('#saveButton').click(
            function() {
                var flag = $('#avatarFileForm').bootstrapValidator('validate').data('bootstrapValidator').isValid();
                //校验
                if(flag){
                    $.ajax({
                        url: 'avatar/user-upload-avatar.json?id='+userId,
                        type: "POST",
                        data: new FormData($("#avatarFileForm")[0]),
                        enctype: 'multipart/form-data',
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function (result) {
                            console.log(result);
                            var msg = result.ajaxResultJson.msg;
                             if(result.ajaxResultJson.success){
                                  //成功时退出对话框
                                 $('#Modal').modal('hide');
                              }else{
                                  
                              }
                             layer.msg(msg);
                        },
                        error: function (result) {
                            var msg = result.ajaxResultJson.msg;
                             layer.msg(msg);
                            
                        }
                      });
                
                }else{
                    layer.msg("请按格式要求上传！");
                }

  });
    
    /*]]>*/
</script>