文件上传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="width: 200px; height: 150px;">
                                         <img src="data:images/default.jpg" alt="默认头像"
                                             th:src="@{images/default.jpg}" />
                                     </div>
                                     <div class="fileupload-preview fileupload-exists thumbnail"
                                         style="max-width: 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>