Мне нужно сохранить HTML form, который имеет некоторые элементы управления входными данными, такие как select, input и textarea, а также некоторые изображения в sub div формы с помощью AngularJs. Итак, я могу сохранить данные, нажав кнопку «Сохранить» с инициализацией имен элементов управления вводом для модели. Итак, как получить изображения в угловом контроллере, который проектируется с помощью javascript. А как сохранить изображения в локальной папке, а также сохранить ссылки на сохраненные изображения локальной папки в базе данных?
HTML-код:
<html ng-app="SuperAdmin">
<div ng-controller="PlotsController">
<form action="#" class="form-horizontal" name="myPlotsForm" novalidate>
<select ng-model="VentureName" required>
<option ng-selected="false" value="">Select Venture</option>
</select>
<input type="text" required ng-model="PlotNo" />
<textarea required cols="10" rows="5" ng-model="PlotDescription"></textarea>
<input id="images" type="file" name="images[]" multiple />
<div id="images-to-upload" class="col-md-8"></div>
<button type="submit" ng-click="SavePlots(myPlotsForm.$valid,$files)">Save</button>
</form>
</div>
</html>
Javascript код предварительного просмотра изображений:
var fileCollection = new Array();
$('#images').on('change', function (e) {
var files = e.target.files;
var cnt = files.length;
$('#images-to-upload').html('');
if (cnt <= 5) {
$.each(files, function (i, file) {
fileCollection.push(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var templated = '<div id="imgPreView' + i + '" class="popup col-md-2"> ' +
'<img class="img-responsive" id="targetImg' + i + '" src="' + e.target.result + '"/> ' +
'<div class="caption">' +
'<a href="#"><i class="fa fa-trash-o"></i></a>' +
'<span id="description"></span>' +
'</div>' +
'</div>';
$('#images-to-upload').append(templated);
}
else {
alert('Images selection should not more than 5.');
}
});
AngularJs для сохранения / отправки входных данных и попытка сохранения изображений:
app.controller('PlotsController', function ($scope, $http, growl, CRUDServiceSchemes, CRUDServicePlots, Upload, $timeout) {
$scope.SavePlots = function (isValid, files) {
if ($scope.VentureName == null || $scope.VentureName == undefined) {
$scope.pventure = false;
}
else {
if (isValid) {
var plots = {
vID: $scope.VentureName,
PlotNo: $scope.PlotNo,
PlotArea: $scope.PlotArea
}
$scope.SelectedFiles = files;
if ($scope.SelectedFiles && $scope.SelectedFiles.length) {
Upload.upload({
url: '/SuperAdmin/AddVenture/CreatePlots',
data: {
files: $scope.SelectedFiles
}
}).then(function (response) {
$timeout(function () {
$scope.Result = response.data;
});
}, function (response) {
if (response.status > 0) {
var errorMsg = response.status + ': ' + response.data;
alert(errorMsg);
}
}, function (evt) {
var element = angular.element(document.querySelector('#dvProgress'));
$scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');
});
}
$http({
method: 'POST',
url: '/SuperAdmin/AddVenture/CreatePlots',
data: { plots: plots },
dataType: 'JSON',
headers: { 'content-type': 'application/json' }
}).then(function (response) {
if (response.data == "SUCCESS") {
$scope.VentureName = null;
$scope.PlotNo = '';
$scope.PlotArea = '';
$scope.pventure = true;
$scope.validation = true;
CRUDServicePlots.getPlots().then(function (result) { $scope.Plot = result; });
growl.success('Successfully Added');
}
else {
growl.warning('Some thing went wrong, please try again.', { title: 'Warning!' });
}
});
}
}
}
});