Hello evry one我想将图片上传给员工并进行审核，这是代码的方式我希望你能帮助我谢谢这个例子的文章there 或Download it from there and try。
我的app.js
var app = angular.module('MyApp', [
'ui.router',
'ui.bootstrap',
'ngAnimate',
'angularFileUpload',
]);
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
// default route
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/home/home.html',
controller: 'homeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'aboutCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/contact/contact.html',
controller: 'contactCtrl'
})
.state('customer', {
url: '/customer',
templateUrl: 'app/customer/customer.html',
controller: 'customerCtrl'
})
.state('customer.detail', {
url: '^/customer/detail/{customerId:[0-9]{1,5}}',
templateUrl: 'app/customer/customerdetail.html',
controller: 'customerCtrl'
})
.state('customer.detail.contact', {
url: '^/customer/detail/contact/{customerId:[0-9]{1,5}}',
templateUrl: 'app/customer/contact.html',
controller: 'customerContactCtrl'
})
}]);
app.directive('loading', ['$http', function ($http) {
return {
restrict: 'A',
link: function (scope, elm, attrs) {
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (v) {
if (v) {
elm.show();
} else {
elm.hide();
}
});
}
};
}]);
app.directive('fileUpload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0; i < files.length; i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
});
结束service.js
angular.module('MyApp')
.factory('Customer', ['$q', '$http', function ($q, $http) {
var baseUrl = 'api/customer/';
var contactBaseUrl = 'api/Contact/';
var customerService = {};
customerService.customers = [];
customerService.currentCustomer = {};
// Search Customers
customerService.search = function (text) {
var deferred = $q.defer();
return $http({
url: baseUrl + 'search',
method: 'GET',
params: { 'searchText': text },
cache: true
}).success(function (data) {
deferred.resolve(
customerService.customers = data);
}).error(function (error) {
deferred.reject(error);
})
return deferred.promise;
}
// New Customers
customerService.newCustomer = function () {
var deferred = $q.defer();
return $http.get(baseUrl + "new")
.success(function (data) {
deferred.resolve(customerService.customer = data);
})
.error(function (error) {
deferred.reject(error);
})
return deferred.promise;
}
// Save Customer
customerService.Save = function (customer, files) {
var deferred = $q.defer();
return $http.post(baseUrl + "Save", customer)
.success(function (data) {
deferred.resolve(customerService.customer = data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
// Customers detail by customer id
customerService.customerDetail = function (id) {
var deferred = $q.defer();
return $http.get(baseUrl + "detail/" + id)
.success(function (data) {
deferred.resolve(
customerService.currentCustomer = data);
})
.error(function (error) {
deferred.reject(error);
})
return deferred.promise;
}
// delete Customers
customerService.delete = function (id) {
var deferred = $q.defer();
return $http.post(baseUrl + "delete/" + id)
.success(function (data) {
deferred.resolve();
})
.error(function (error) {
deferred.reject(error);
})
return deferred.promise;
}
/* CUSTOMER CONTACTS
************************************/
customerService.customerContacts = function (id) {
var deferred = $q.defer();
return $http.get(contactBaseUrl + "ByCustomerId/" + id)
.success(function (data) {
deferred.resolve(customerService.conntacts = data);
}).error(function (error) {
deferred.reject(error);
})
return deferred.promise;
}
return customerService;
}]);
controller.js
var app = angular.module("MyApp")
app.controller('customerCtrl', ['$scope', '$state', '$stateParams', '$modal', '$log', 'Customer', function ($scope, $state, $stateParams, $modal, $log, Customer) {
var customerId = $stateParams.customerId;
$scope.searchText = '';
$scope.customers = searchCustomers();
$scope.contacts = [];
$scope.customer = null;
$scope.currentCustomer = null;
$scope.$watch('searchText', function (newVal, oldVal) {
if (newVal != oldVal) {
searchCustomers();
}
}, true);
function searchCustomers() {
Customer.search($scope.searchText)
.then(function (data) {
$scope.customers = Customer.customers;
});
};
$scope.customerDetail = function (id) {
if (!id) return;
Customer.customerDetail(id)
.then(function (data) {
$scope.currentCustomer = Customer.currentCustomer;
$state.go('customer.detail', { 'customerId': id });
});
};
/* Need to call after defining the function
It will be called on page refresh */
$scope.currentCustomer = $scope.customerDetail(customerId);
// Delete a customer and hide the row
$scope.deleteCustomer = function ($event, id) {
var ans = confirm('Are you sure to delete it?');
if (ans) {
Customer.delete(id)
.then(function () {
var element = $event.currentTarget;
$(element).closest('div[class^="col-lg-12"]').hide();
})
}
};
// Add Customer
$scope.addCustomer = function () {
Customer.newCustomer()
.then(function (data) {
$scope.customer = Customer.customer;
$scope.open('sm');
});
}
// Edit Customer
$scope.editCustomer = function () {
$scope.customer = $scope.currentCustomer;
$scope.open('lg');
}
// Open model to add edit customer
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: false,
backdrop: 'static',
templateUrl: 'app/customer/AddEditCustomer.html',
controller: 'customerModalCtrl',
size: size,
resolve: {
customer: function () {
return $scope.customer;
}
}
});
modalInstance.result.then(function (response) {
$scope.currentCustomer = response;
$state.go('customer.detail', { 'customerId': response.CustomerId });
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
app.controller('customerModalCtrl', ['$scope', '$modalInstance', 'Customer', 'customer', function ($scope, $modalInstance, Customer, customer) {
$scope.customer = customer;
if (customer.CustomerId > 0)
$scope.headerTitle = 'Edit Customer';
else
$scope.headerTitle = 'Add Customer';
$scope.save = function () {
Customer.Save($scope.customer).then(function (response) {
$modalInstance.close(response.data);
})
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
结束这是我的html模板
<div class="form-horizontal">
<fieldset>
<legend>Employees</legend>
<div class="col-lg-3">
<img ng-src="{{currentCustomer.Image ? currentCustomer.Image : 'customerimages/default-image.png'}}"
class="img-circle"
alt='customer image' />
<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)" id="photo-upload" />
</div>
<div class="col-lg-8">
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Full Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" ng-model="currentCustomer.FullName" disabled>
</div>
<div class="col-lg-1">
n ng-click="editCustomer()"
ng-hide="currentCustomer == null"
class="btn btn-primary">
Edit
</button>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Adress</label>
<div class="col-lg-8">
<input type="text" class="form-control" ng-model="currentCustomer.Address" disabled>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">City</label>
<div class="col-lg-8">
<input type="text" class="form-control" ng-model="currentCustomer.City" disabled>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">البلد</label>
<div class="col-lg-8">
<input type="text" class="form-control" ng-model="currentCustomer.Country" disabled>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Zip Code</label>
<div class="col-lg-8">
<input type="text" class="form-control" ng-model="currentCustomer.ZipCode" disabled>
</div>
</div>
<div class="form-group">
<div class="col-lg-8 col-lg-offset-3">
<a ui-sref="customer.detail.contact({contactCustomerId: currentCustomer.CustomerId})">Detail</a>
</div>
</div>
</div>
</fieldset>
</div>
<div ui-view></div>
结束这是我的Action Save Api Controller
[Route("api/Customer/Save")]
[HttpPost]
public Customer SaveCustomer(Customer customer)
{
if (customer.CustomerId > 0)
{
var dbCustomer = db.Customers.FirstOrDefault(x => x.CustomerId == customer.CustomerId);
dbCustomer.FullName = customer.FullName;
dbCustomer.Address = customer.Address;
dbCustomer.City = customer.City;
dbCustomer.Country = customer.Country;
dbCustomer.ZipCode = customer.ZipCode;
dbCustomer.Image = customer.Image;
db.SaveChanges();
return dbCustomer;
}
else
{
db.Customers.Add(customer);
db.SaveChanges();
return customer;
}
}