文件上传FormData

 ?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> 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>