文件上传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>

文件上传FormData的相关教程结束。