AngularJs附件上传下载

首先：angular-file-upload 是一款轻量级的 AngularJS 文件上传工具，为不支持浏览器的 FileAPI polyfill 设计，使用 HTML5 直接进行文件上传。

第一步：引用angularjs的脚本：ng-file-upload-shim.min.js 和 ng-file-upload.min.js

第二步：在angularjs的controller中注入：ngFileUpload

           例如：angular.module('liaoyuan.controllers', ['ui.bootstrap', 'ngFileUpload', 'ng.ueditor']);

第三部：写代码

一、上传

1、前台的html代码  

 <form>
        <!-- <input class="form-control update-input" ngf-select type="file" ng-model="file" name="file" readonly="readonly" /> -->
        <div class="content">
            <label class="update-label">请选择上传的文件位置：</label>

            <input class="filename" type="text" readonly="readonly" />
            <a href="javascript:;" class="file-a" name="file">
                <input class="file" ngf-select type="file" ng-model="file" name="file" readonly="readonly" />浏览...
            </a>
        </div>
        <button type="button" class="btn btn-primary update-button" style="" ng-click="submit()">
            上传
        </button>
        <script type="text/javascript">
                var file = $('.file'),
                    aim = $('.filename');
                file.on('change', function( e ){
                    var name = e.currentTarget.files[0].name;
                    aim.val( name );
                });
        </script>
    </form>

2、angularjs 控制器Controller中的代码

app.controller('FileController', function ($scope, $uibModalInstance, Upload) {   
    //取消
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
    //上传按钮
    $scope.submit = function () {
        $scope.upload($scope.file);
    };

    $scope.upload = function (file) {
        $scope.fileInfo = file;
        Upload.upload({
            //服务端接收
            method: 'POST',
            url: 'http://localhost:56897/api/serviceLogAttachments',
            file: file
        }).progress(function (evt) {
            //进度条
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
        }).success(function (newAttachment) {
            //上传成功
            $uibModalInstance.close(newAttachment);
        }).error(function (data, status, headers, config) {
            //上传失败
            console.log('error status: ' + status);
        });
    };



});

注意：Upload一定要注入

3、后台上传代码

[HttpPost]
        public IHttpActionResult PostAttachment()
        {
            int logId = 1;
            HttpContext.Current.Response.ContentType = "application/json";
            HttpFileCollection files = HttpContext.Current.Request.Files;
            HttpRequestMessage h = new HttpRequestMessage();
            var file = files[0];
            string fileExt = Path.GetExtension(file.FileName);

            string attachmentName = file.FileName.Substring(0, file.FileName.LastIndexOf("."));

            string fileNewName = attachmentName + DateTime.Now.ToString("yyyyMMddHHmmssfff")+ fileExt;

            string strRelativeDir = "/Upload/服务管理/日志详情附件/";
            
            string fliePath = HttpContext.Current.Request.MapPath(strRelativeDir);
            if (!Directory.Exists(fliePath))
            {
                Directory.CreateDirectory(fliePath);
            }
            string strSavePath = Path.Combine(fliePath, fileNewName);
            file.SaveAs(strSavePath);
//插入数据库
            ServiceLogAttachmentService.AddAttachment(attachment);
            return CreatedAtRoute("DefaultApi", new{id = attachment.AttachmentID}, attachment);
        }

二、下载

1、前台下载代码

    方法一：直接访问后台数据（但此方法在前后台有授权与验证的时候，会不方便）

 //附件下载
    $scope.fileDown = function (url, name) {
        window.location.href = "http://localhost:56888/api/ServiceStateChanges?url=" + url + "&fileName=" + name;
    }

   方法二：在请求数据时在header上加上验证的token 

 //附件下载
    $scope.fileDown = function (url, name) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = "blob";

        xhr.open("GET", "http://localhost:56888/api/ServiceStateChanges?url=" + url + "&filename=" + name + "", true);

        xhr.setRequestHeader("Authorization", 'Bearer ' + currUser.token);

        xhr.onreadystatechange = function (e) {
            if (this.readyState == 4) {
                var response = this.response;
                var URL = window.URL || window.webkitURL || window;
                var link = document.createElement('a');
                link.href = URL.createObjectURL(response);
                link.download = name;
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                link.dispatchEvent(event);
            }
        }
        xhr.send(null);      
    }

 

2、后台下载代码

 public HttpResponseMessage GetFile(string url,string fileName)
        {
            try
            {
                var FilePath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/"+ url);
                System.IO.FileStream stream=null;
                stream = new FileStream(FilePath, FileMode.Open);
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                response.Content = new StreamContent(stream);
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
                {
                    FileName = fileName
                };
                return response;
            }
            catch
            {
                return new HttpResponseMessage(HttpStatusCode.NoContent);
            }
        }

 

注：仅个人理解及笔记，有误的地方请各位大神指正！