如何将angularjs ng-crop结果裁剪图像上传到服务器？

Question

By using following program am getting the resulted cropped image.I will get the result image in ng-src="{{myCroppedImage}}" this image i need to upload.how can i upload that image to my server by using jsp action.please help me out 通过使用以下程序，可以获取生成的裁剪图像。我将在ng-src =“ {{myCroppedImage}}”“中获取需要上传的图片。我如何通过jsp操作将该图片上传到服务器。请帮帮我

<html>
                <head><script src="js/angular.min.js"></script>
                <script src="js/angular-route.min.js"></script>
                  <script src="js/ng-img-crop.js"></script>
                  <script src="js/init.js"></script>
                  <link rel="stylesheet" type="text/css" href="css/ng-img-crop.css">
                  <style>
                    .cropArea {
                  background: #E4E4E4;
                  overflow: hidden;
                  width:200px;
                  height:200px;
                }
                  </style>
                  <script>
                  angular.module('app', ['ngImgCrop'])
                  .controller('Ctrl', function($scope) {
                    $scope.myImage='';
                    $scope.myCroppedImage='';

                    var handleFileSelect=function(evt) {
                      var file=evt.currentTarget.files[0];
                      var reader = new FileReader();
                      reader.onload = function (evt) {
                        $scope.$apply(function($scope){
                          $scope.myImage=evt.target.result;
                        });
                      };
                      reader.readAsDataURL(file);
                    };            angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
    });
    </script>
                </head>
    <form action="upload.jsp" method="post>
                <body ng-app="app" ng-controller="Ctrl">
                  <div>Select an image file: <input type="file" id="fileInput" /></div>
                  <div class="cropArea">
                    <img-crop image="myImage" area-type="rectangle" result-image="myCroppedImage" result-image-size="400"></img-crop>
                  </div>
                  <div>Cropped Image:</div>
                  <div><img ng-src="{{myCroppedImage}}" /></div>
                </body></form>
                </html>

Answer 1

I know that you might have already figured it out by now, but for future reference for others coming here for an answer, here is a quick sample of how I did it. 我知道您现在可能已经知道了，但是为了将来供其他人参考，这里有一个快速示例说明了我如何做。 One thing to take into consideration is that it doesn't work in old browsers without the latest HTML5 support. 要考虑的一件事是，如果没有最新的HTML5支持，它就不能在旧的浏览器中运行。 Anyway, it did the trick for me. 无论如何，它对我有用。

By the way, here are some references that helped me out https://gist.github.com/brianfeister/56a1c6c77cd5928a1c53 and https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs 顺便说一句，这里有一些参考资料，帮助我走出https://gist.github.com/brianfeister/56a1c6c77cd5928a1c53和https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

 // Assuming we have the crop result in myCroppedImage // Get the mime part of it var mimeString = $scope.myCroppedImage.split(',')[0].split(':')[1].split(';')[0]; // Get the data part and decode it var dataString = window.atob($scope.myCroppedImage.split(',')[1]); var dataArray = []; for(var i = 0; i < dataString.length; i++) { dataArray.push(dataString.charCodeAt(i)); } var imageData = new Blob([new Uint8Array(dataArray)], {type: mimeString}); var fd = new FormData(); fd.append('file', imageData); $http({ url: 'your/upload/script/url', method: 'POST', data: fd, transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(yourSuccessCallback) .error(yourErrorCallback);

如何将angularjs ng-crop结果裁剪图像上传到服务器？

问题描述

1 个解决方案

解决方案1
1 2016-06-13 06:58:23

如何将angularjs ng-crop结果裁剪图像上传到服务器？

问题描述

1 个解决方案

解决方案1 1 2016-06-13 06:58:23

解决方案1
1 2016-06-13 06:58:23