Я новичок в angularjs и у меня есть страница регистрации, где пользователь может загрузить изображение и заполнить другие данные. Я отправляю все данные в класс действий java struts2 через http.post из angularjs. Все остальные данные публикуются в классе действий, кроме изображения. Я понятия не имею, как мне получить это изображение в классе действий. Я хочу сохранить изображение в папке текущего проекта и имя файла изображения в базе данных. Пожалуйста, дайте мне знать, если это правильный подход для выполнения этой деятельности. Я надеюсь, что кто-нибудь может мне помочь, и спасибо заранее.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<meta charset="ISO-8859-1">
<title>Registration</title>
</head>
<body>
<form ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="id">
<input type="text" ng-model="name">
<input type="file" fileread="uploadme"/>
<input type="submit" value="Register" id="editBtn" ng-click="register()" />
</form>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$http',function($scope, $http) {
$scope.register = function() {
var fd = new FormData();
var imgBlob = dataURItoBlob($scope.uploadme);
fd.append('file',imgBlob);
$http.post("registerData.action", {
'empId' : $scope.id,
'empName' : $scope.name,
'photo' : fd,
}
)};
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
type: mimeString
});
}
}]);
app.directive("fileread", [
function() {
return {
scope: {
fileread: "="
},
link: function(scope, element, attributes) {
element.bind("change", function(changeEvent) {
var reader = new FileReader();
reader.onload = function(loadEvent) {
scope.$apply(function() {
scope.fileread = loadEvent.target.result;
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}
]);
</script>