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 = ;
             HttpContext.Current.Response.ContentType = "application/json";
             HttpFileCollection files = HttpContext.Current.Request.Files;
             HttpRequestMessage h = new HttpRequestMessage();
             var file = files[];
             string fileExt = Path.GetExtension(file.FileName);

             string attachmentName = file.FileName.Substring(, 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);
             }
         }

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