首页手记 AngularJS实现WebAPi上传

AngularJS实现WebAPi上传

标签：

Html/CSS JavaScript AngularJS

前言

前面一系列我们纯粹是讲AngularJS，在讲一门知识时我们应该结合之前所学综合起来来做一个小的例子，前面我们讲了在MVC中上传文件的例子，在本节我们讲讲如何利用AngularJS在WebAPi中如何上传，来巩固下WebAPi并结合AngularJS中对应的一些组件学习下。

AngularJS Upload Files for WebAPi

（一）在WebAPi中我们如何获得上传本地文件的物理路径呢？需要实现此类： MultipartFormDataStreamProvider ，从该类中获取上传文件的物理路径并返回。如下：

public class UploadMultipartFormProvider : MultipartFormDataStreamProvider
    {
        public UploadMultipartFormProvider(string rootPath) : base(rootPath) { }

        public override string GetLocalFileName(HttpContentHeaders headers)
        {
            if (headers != null &&
                headers.ContentDisposition != null)
            {
                return headers
                    .ContentDisposition
                    .FileName.TrimEnd('"').TrimStart('"');
            }

            return base.GetLocalFileName(headers);
        }
    }

（二）为避免有些浏览器不支持多个文件上传我们通过实现 ActionFilterAttribute 特性来加以判断，如下：

public class MimeMultipart : ActionFilterAttribute
    {
        public override void OnActionExecuting(HttpActionContext actionContext)
        {
            if (!actionContext.Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(
                    new HttpResponseMessage(
                        HttpStatusCode.UnsupportedMediaType)
                );
            }
        }

        public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
        {

        }
    }

以上两个类为我们在WebAPi中上传提供一个保障。接下来我们需要的是如何利用AngularJS来上传。

在AngularJS中上传需要用到 ng-file-upload 组件，而非 angularFileUpload 组件，在此之前一直是利用angularFileUpload组件，但是后来逐步迁移并且命名为ng-file-upload组件。同时为了一些加载效果如在github中顶部有加载线的过程，决定也在这里实现一下看看【说明：上传过程用到angular-loading-bar（加载）和ng-file-upload（上传）组件】。

脚本

（1）为了重用，我们将加载组件进行封装。

 //common.load.js
(function () {
    'use strict';

    angular
        .module('common.load', [
            'angular-loading-bar',
            'ngAnimate'
        ]);
})();

（2）启动加载线。

//loadBarCtrl.js
(function (app) {
    "use strict";

    app.controller("loadCtrl", loadCtrl);

    function loadCtrl(cfpLoadingBar) {
        cfpLoadingBar.start();
    }

})(angular.module("common.load"));

（3）上传文件代码

//fileUploadCtrl.js
(function (app) {
    'use strict';

    app.controller('fileUploadCtrl', fileUploadCtrl);

    fileUploadCtrl.$inject = ['$scope', '$http', '$timeout', 'Upload'];

    function fileUploadCtrl($scope, $http, $timeout, Upload, cfpLoadingBar) {
        $scope.upload = [];
        $scope.UploadedFiles = [];
        $scope.startUploading = function ($files) {
            for (var i = 0; i < $files.length; i++) {
                var $file = $files[i];
                (function (index) {
                    $scope.upload[index] = Upload.upload({
                        url: "/api/upload",
                        method: "POST",
                        file: $file,
                        withCredentials: false
                    }).progress(function (evt) {
                    }).success(function (data, status, headers, config) {
                        $scope.UploadedFiles.push({ FileName: data.FileName, FilePath: data.LocalFilePath, FileLength: data.FileLength });
                        cfpLoadingBar.complete();
                    }).error(function (data, status, headers, config) {
                        
                    });
                })(i);
            }
        }
    }
})(angular.module("common.load"));

（4）加载主模块以及依赖模块。

//app.js
(function () {
    'use strict';

    angular
        .module('angularUploadApp', [
            'ngRoute',
            'ngFileUpload',
            'common.load'
        ])
        .config(config)

    config.$inject = ['$routeProvider'];

    function config($routeProvider) {
        $routeProvider
      .when('/', {
          templateUrl: '../../app/templates/fileUpload.html',
          controller: 'fileUploadCtrl'
      })
      .otherwise({
          redirectTo: '/'
      });
    }
})();

界面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/loading-bar.min.css" rel="stylesheet" media="all" />
</head>
<body ng-app="angularUploadApp" ng-controller="loadCtrl">
    <nav class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://www.cnblogs.com/createmyself">Angular File WebAPi Upload by <i style="color:#2da12d;font-weight:bolder;">xpy0928</i></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

        </div>

    </nav>
    <div class="container">
        <div ng-include class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'../../app/templates/fileUpload.html'"></div>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../Scripts/jquery-1.10.2.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../Scripts/angular.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../Scripts/angular-animate.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../Scripts/angular-route.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../app/plugins/loading-bar.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../app/modules/common.load.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../Scripts/ng-file-upload.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../app/app.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../app/controllers/loadBarCtrl.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../app/controllers/fileUploadCtrl.js"></script>
</body>
</html>

模板页：

<div class="row" ng-controller="fileUploadCtrl">
    <div class="col-xs-3">
        <div>
            <input type="file" accept="images/*" ngf-pattern="'.png,.jpg,.gif'" ngf-select="startUploading($files)" multiple>
        </div>
    </div>
    <div class="col-xs-9">
        <div class="panel-body">
            <div class="panel panel-default" ng-repeat="uploadedFile in UploadedFiles track by $index">
                <div class="panel-heading">
                    <strong>{{uploadedFile.FileName}}</strong>
                </div>
                <div class="panel-body">
                    <div class=" media">
                        <a class="pull-left" href="#">
                            <img class="media-object" width="100" ng-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../uploadimages/{{uploadedFile.FileName}}" />
                        </a>
                        <div class="media-body">
                            <div class="lead" style="font-size:14px;color: crimson;width:500px;word-wrap:break-word">{{uploadedFile.FilePath}}</div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    图片总字节： <span style="color:black">{{uploadedFile.FileLength}}</span>
                </div>
            </div>
        </div>

    </div>
</div>

后台api服务:

 [RoutePrefix("api/upload")]    public class FileUploadController : ApiController
    {
        [Route("")]
        [MimeMultipart]        public async Task<FileUploadResult> Post()
        {            var uploadPath = HttpRuntime.AppDomainAppPath + "UploadImages";            if (!Directory.Exists(uploadPath))
                Directory.CreateDirectory(uploadPath);            var multipartFormDataStreamProvider = new UploadMultipartFormProvider(uploadPath);
            await Request.Content.ReadAsMultipartAsync(multipartFormDataStreamProvider);            string _localFileName = multipartFormDataStreamProvider
                .FileData.Select(multiPartData => multiPartData.LocalFileName).FirstOrDefault();            return new FileUploadResult
            {
                LocalFilePath = _localFileName,

                FileName = Path.GetFileName(_localFileName),

                FileLength = new FileInfo(_localFileName).Length
            };
        }
    }

首先我们来看看例子搭建的结构：

生成界面效果：

下面我们来演示下最终效果：

总结

（1）在WebAPi中用到路由特性时，若在控制器中如 [RoutePrefix("api/upload")] 此时在方法中若未有 [Route("")] 此时在上传的url必须显示添加Post如： url: "/api/upload/post" 若添加则不用显示添加方法名。

（2）在angular中加载模板为

 <div ng-include class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="''"></div> 【注】：src中要加单引号，否则出错 或者 <div ng-include></div>

（3）对于在WebAPi中上传可以参看此链接，更加详细。

WebAPi：https://github.com/stewartm83/angular-fileupload-sample

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

qq_遁去的一_1

手记
篇

粉丝

7

获赞与收藏

23

关注作者，订阅最新文章

相关文章推荐

Html5+css3+angularjs+jquery+webAPi 开发手机web（一）

asp.net mvc+angularjs+web api单页应用

[Angularjs]ng-file-upload上传文件

asp.net mvc+angularjs+web api单页

如何实现 ASP.NET Core WebApi 的版本化

阅读免费教程

JavaScript 入门教程

80个小节 311148 2192

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

AngularJS实现WebAPi上传

前言

AngularJS Upload Files for WebAPi

脚本

界面

总结

相关文章推荐

阅读免费教程