<div ng-app="myPhoto">
<div ng-controller="myControl">
<div class="photoUpload box">
<center>
<b><i>
{{message}}
</i></b>
</center>
<form id="imageform" enctype="multipart/form-data" method="POST">
<table align="left" cellpadding="10">
<caption><h2>Create an album!</h2><hr></caption>
<div ng-model="user.err"></div>
<tr>
<th><label for="album">Album:</label></th>
<td><input type="text" ng-model="user.album" placeholder="Enter the album name" class="form-control"></td>
</tr>
<tr>
<th><label for="photo">Photo:</label></th>
<td><input type="file" ng-model="user.photo" ng-file-select="onFileSelect($files)" multiple class="form-control"></td>
</tr>
<tr>
<th><label for="title">Photo title:</label></th>
<td><input type="text" ng-model="user.pictitle" placeholder="Enter the photo title or caption" class="form-control"></td>
</tr>
<tr>
<th><label for="files">Preview file:</label></th>
<td>
<div ng-model="user.preview" class="previewfile"><img src=""></img></div>
</td>
</tr>
<tr>
<th colspan="2">
<button type="button" class="btn-primary" ng-click="uploadimg()">Upload</button>
<button type="button" class="btn-primary">Reset</button>
</th>
</tr>
</table>
</form>
</div>
</div>
</div>
var obj = angular.module("myPhoto", []);
obj.controller("myControl", function($scope, $http){
var formData = new FormData();
formData.append("file", $scope.file);
$scope.uploadimg = function(){
$http({
method: "POST",
url:"home/index",
data: $.param({'formData':$scope.user}),
headers: {'Content-Type': 'multipart/form-data'}
//headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function (response,status) {
if(status==200)
{
//console.log(response);
$scope.message = response;
$scope.user.err.html(data).fadeIn();
$scope.formData[0].reset();
}
})
.error(function(response,status){
});
}
else
{
$scope.message = "Failed!";
}
});