1 Download tool
bower install ng-file-upload
bower install ng-file-upload-shim (for non html5 suppport supports non-html5 browsers)
2 Write a page
<div class="input-group"> <input class="form-control" ng-model="formModel.picture" type="text" style="width: 500px;"> <div class="btn btn-default" ngf-select="upload($file)" ngf-pattern="'image/*'" ngf-multiple="false" ng-model="file" name="file">选择文件</div> <div style="height:80px"> <img style="height:100%;" ng-src="{{formModel.picture}}"> </div> </div>
3 angular controller
controllers.controller('xxx', function ($scope, $window, $http) { $scope.file={}; $scope.upload = function () { if (!$scope.file) return; $scope.isLoadding = true; var formData = new FormData(); formData.append("file", $scope.file); $http.post('xxx/image', formData, { transformRequest: function (data, headersGetterFunction) { return data; }, headers: {'Content-Type': undefined} }).success(function (resultJson, status) { //check data if (resultJson.success) { $scope.formModel.picture = resultJson.data; } else { $scope.tipAlert(resultJson.errorMsg); } }); }; });
4 Spring backend
@ResponseBody @RequestMapping("/image") public Result<String> imageUpload(@RequestParam(value = "file", required = true) MultipartFile imgFile) { String picUrl=""; String regex = ".*\\.(jpg|png|bmp|gif)"; if (Pattern.matches(regex, imgFile.getOriginalFilename()) && imgFile.getSize() <= 2 * 1024 * 1024) { File img = new File("ba_" + convert(imgFile.getOriginalFilename())); //... } return Result.wrapSuccess(picUrl); }
5 Schematic
reference article
http://www.cnblogs.com/jach/p/5734920.html
https://github.com/danialfarid/ng-file-upload
http://blog.csdn.net/csdnmmcl/article/ details/51033954