0
<!DOCTYPE html>
<html ng-app="messageBoardApp" class="page-header">
<head>
<title></title>
<link href="../libs/bootstrap.min.css" rel="stylesheet" />
<!--<script src="Scripts/angular-route.min.js"></script>-->
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-file-upload.min.js"></script>
<script src="../libs/console-sham.min.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="MessageBoardModule.js"></script>
<script src="MessageBoardController.js"></script>
<script src="MessageBoardService.js"></script>
</head>
<body ng-controller="messageBoardController" class="container">
<div>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="titleText" ng-model="message.title" class="form-control" />
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea name="contentText" ng-model="message.content" rows="5" cols="40" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="file">File</label>
<input type="file" nv-file-select="" uploader="uploader" multiple>
</div>
<div class="form-group">
<label for="fileList">These are your selected files</label>
<br/>
<ul>
<select name="files" ng-model="selectedFile" ng-options="option.file.name for option in uploader.queue" size="4" class="form-control"></select>
</ul>
</div>
<br/>
<div class="col-sm-offset-0 col-sm-6">
<input type="button" value="Remove File" ng-click="remove()" />
<button ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">Remove all</button>
</div>
<br/>
<br/>
<br/>
<div class="col-sm-offset-4 col-sm-6">
<button ng-click="uploader.uploadAll()">Upload All</button>
<!--<input type="submit" value="Add Message" ng-click="submitForm()"/>-->
<input type="button" value="Exit" ng-click="Close()" />
</div>
</form>
</div>
</body>
</html>
控制器：上傳多個文件
messageBoardApp.controller('messageBoardController', ['$scope', 'FileUploader', 'MessageBoardService',
function ($scope, FileUploader, MessageBoardService) {
var uploader = $scope.uploader = new FileUploader({});
$scope.remove = function (selectedItem) {
$scope.uploader.queue.splice(uploader.queue.indexOf(selectedItem), 1);
};
//$scope.message=messageBoardService.SaveMessage();
$scope.submitForm = function() {
alert("Controller");
var message = $scope.message;
MessageBoardService.SaveMessage(message);
//MessageBoardService.SaveMessage($scope.message);
};
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function (fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function (addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function (fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function (progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function (fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
// -------------------------------
}]);
服務：
messageBoardApp.factory('MessageBoardService', function() {
var SaveMessage = function (newMessage) {
alert(newMessage.content);
alert(newMessage.title);
return true;
};
return {
SaveMessage: SaveMessage
};
});
模塊：
var messageBoardApp = angular.module("messageBoardApp", ['angularFileUpload']);
正在使用下面的文件上傳js從這個鏈接
https://github.com/nervgh/angular-file-upload/
我明白我選擇的所有文件都在隊列中。我不知道如何將這些文件（超過1）傳遞給.net mvc wep api調用控制器，然後將值傳遞給SQL DB。
我堅持將所有表單值傳遞給服務，然後傳遞給wep api控制器。