文件上传FormData

Posted 2020-10-30 Steven5007

  1 <div class="modal-dialog">
  2     <div class="modal-content">
  3         <div class="modal-header">
  4             <button type="button" class="close" data-dismiss="modal"
  5                 aria-hidden="true">&times;</button>
  6             <h4 class="modal-title" id="myModalLabel">用户头像上传</h4>
  7         </div>
  8         <div class="modal-body">
  9             <section class="panel">
 10                 <div class="panel-body">
 11                     <form role="form" id="avatarFileForm" enctype="multipart/form-data">
 12                         <div class="form-group">
 13                             <div class="col-md-12">
 14                                 <div class="fileupload fileupload-new"
 15                                     data-provides="fileupload">
 16                                     <div class="fileupload-new thumbnail"
 17                                         style="width: 200px; height: 150px;">
 18                                         <img src="images/default.jpg" alt="默认头像"
 19                                             th:src="@{images/default.jpg}" />
 20                                     </div>
 21                                     <div class="fileupload-preview fileupload-exists thumbnail"
 22                                         style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
 23                                     <div>
 24                                         <span class="btn btn-default btn-file"> <span
 25                                             class="fileupload-new"><i class="fa fa-paper-clip"></i>选择图片</span>
 26                                             <span class="fileupload-exists"><i class="fa fa-undo"></i>
 27                                                 更换</span> <input class="default" id="userAvatar" name="file"
 28                                             type="file" />
 29                                         </span> <a href="#" class="btn btn-danger fileupload-exists"
 30                                             data-dismiss="fileupload"><i class="fa fa-trash"></i> 移除</a>
 31                                     </div>
 32                                 </div>
 33                                 <br /> <span class="label label-danger ">NOTE!</span> <span>
 34                                     1、缩略图仅支持最新的Firefox，Chrome，Opera，Safari和Internet Explorer 10 <br />
 35                                     2、仅支持 .jpg、.jpeg或.png的图片格式!
 36                                 </span>
 37                             </div>
 38                         </div>
 39 
 40 
 41                     </form>
 42                 </div>
 43             </section>
 44 
 45         </div>
 46         <div class="modal-footer">
 47             <button id="reset" type="button" class="btn btn-default"
 48                 data-dismiss="modal">关闭</button>  <!-- data-dismiss="modal" 点击完模态框消失 -->
 49             <button id="saveButton" type="button" class="btn btn-primary">提交</button>
 50         </div>
 51     </div>
 52 </div>
 53 <!--file upload-->
 54 <link rel="stylesheet" type="text/css"
 55     href="css/bootstrap-fileupload.min.css" />
 56 <!--file upload-->
 57 <script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script>
 58 <script th:inline="javascript">
 59     /*<![CDATA[*/
 60     var userId = [[${userId}]];
 61     $(\'#avatarFileForm\').bootstrapValidator(
 62             {
 63                 message : \'This value is not valid\',
 64                 feedbackIcons : {
 65                     valid : \'glyphicon glyphicon-ok\',
 66                     invalid : \'glyphicon glyphicon-remove\',
 67                     validating : \'glyphicon glyphicon-refresh\'
 68                 },
 69                 fields : {
 70                     file: {
 71                         validators: {
 72                             notEmpty: {
 73                                 message: \'上传图片不能为空\'
 74                             },
 75                             file: {
 76                                 extension: \'png,jpg,jpeg\',
 77                                 type: \'image/png,image/jpg,image/jpeg\',
 78                                 message: \'图片格式仅支持png,jpg,jpeg\'
 79                             }
 80                         }
 81                     }
 82                 }
 83                 
 84             });
 85 
 86     $(\'#saveButton\').click(
 87             function() {
 88                 var flag = $(\'#avatarFileForm\').bootstrapValidator(\'validate\').data(\'bootstrapValidator\').isValid();
 89                 //校验
 90                 if(flag){
 91                     $.ajax({
 92                         url: \'avatar/user-upload-avatar.json?id=\'+userId,
 93                         type: "POST",
 94                         data: new FormData($("#avatarFileForm")[0]),
 95                         enctype: \'multipart/form-data\',
 96                         processData: false,
 97                         contentType: false,
 98                         cache: false,
 99                         success: function (result) {
100                             console.log(result);
101                             var msg = result.ajaxResultJson.msg;
102                              if(result.ajaxResultJson.success){
103                                   //成功时退出对话框
104                                  $(\'#Modal\').modal(\'hide\');
105                               }else{
106                                   
107                               }
108                              layer.msg(msg);
109                         },
110                         error: function (result) {
111                             var msg = result.ajaxResultJson.msg;
112                              layer.msg(msg);
113                             
114                         }
115                       });
116                 
117                 }else{
118                     layer.msg("请按格式要求上传！");
119                 }
120 
121   });
122     
123     /*]]>*/
124 </script>