In this example
we explain that how to upload multiple files with progress bar in MVC using
Angular JS. or how to implement functionality of the upload multiple files or
documents using Angular JS in Asp.Net MVC.or how to upload multiple files with
progress bar using Angular JS and Ajax in MVC Razor.
Here we use the
ngFileUpload of the Angular JS that are used for the uploading multiple files
at a time.
public class EmployeeController
: Controller
{
public ActionResult Index()
{
return
View();
}
[HttpPost]
public ContentResult Upload()
{
string
path = Server.MapPath("~/Uploads/");
if
(!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
foreach
(string key in
Request.Files)
{
HttpPostedFileBase postedFile =
Request.Files[key];
postedFile.SaveAs(path +
postedFile.FileName);
}
return
Content("Success");
}
}
View:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Upload
multiple files with Progress Bar using AngularJS in ASP.Net MVC</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript">
var app
= angular.module('MyApp', ['ngFileUpload'])
app.controller('EmployeeController',
function ($scope, Upload, $timeout) {
$scope.UploadFiles = function (files) {
$scope.SelectedFiles = files;
if
($scope.SelectedFiles && $scope.SelectedFiles.length) {
Upload.upload({
url: '/Employee/Upload/',
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('#dv_ProgressBar'));
$scope.Progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');
});
}
};
});
</script>
<div ng-app="MyApp" ng-controller="EmployeeController">
<input type="file" multiple="multiple" ngf-select="UploadFiles($files)"/>
<hr/>
Files:
<ul><li ng-repeat="file in SelectedFiles">{{file.name}}</li></ul>
<div id="dv_ProgressBar" class="progress" ng-show="Progress >= 0">
</div>
</div>
</body>
</html>
Article is very different.
ReplyDeletePYTHON Training in Chennai