转载

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

写在前面

最近在弄文档库的H5版，就查找了下相关的上传组件，发现了ng-upload的东东，推荐给大家。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由（一）

[Angularjs]视图和路由（二）

[Angularjs]视图和路由（三）

[Angularjs]视图和路由（四）

[Angularjs]ng-class,ng-class-even,ng-class-odd

[Angularjs]单页应用之分页

[Angularjs]国际化

[Angularjs]ng-repeat中使用ng-model遇到的问题

[Angularjs]过滤器

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

ng-file-upload

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

特性

支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS， PUT(html5) / POST 方法
支持使用 Flash polyfill FileAPI 跨浏览器上传 ( HTML5 和 non-HTML5 ) 。允许客户端在上传之前验证或者修改文件。
当文件的内容类型使用 $upload.http() 时，支持直接上传到 CouchDB，imgur 等等。支持 Angular http POST / PUT 请求的进度事件，更多内容请看 #88(comment)
Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)
轻量级，使用常规的 $http 来上传（支持非 HTML5 浏览器），所以提供所有 Angular $http 功能。

一个例子

需要的js文件，可以去这里下载： https://github.com/danialfarid/ng-file-upload

<!DOCTYPE html> <html ng-app="app"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>文件上传</title>  <meta charset="utf-8" />  <script src="JS/angular.min.js"></script>  <script src="JS/ng-file-upload.min.js"></script>  <script src="JS/ng-file-upload-shim.min.js"></script>  <script>   var app = angular.module('app', ['ngFileUpload']);   app.controller('FileController', function ($scope, Upload) {
   $scope.uploadImg = '';    //提交    $scope.submit = function () {     $scope.upload($scope.file);    };    $scope.upload = function (file) {     $scope.fileInfo = file;     Upload.upload({      //服务端接收      url: 'Ashx/UploadFile.ashx',      //上传的同时带的参数      data: { 'username': $scope.username },      file: file     }).progress(function (evt) {      //进度条      var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);      console.log('progess:' + progressPercentage + '%' + evt.config.file.name);     }).success(function (data, status, headers, config) {      //上传成功      console.log('file ' + config.file.name + 'uploaded. Response: ' + data);      $scope.uploadImg = data;     }).error(function (data, status, headers, config) {      //上传失败      console.log('error status: ' + status);     });    };   });  </script> </head> <body>  <form ng-controller="FileController">   <img src="{{uploadImg}}"/> 
当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/><div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div><button type="submit" ng-click="submit()">submit</button> {{fileInfo.name}}<br /> {{fileInfo.size}} </form></body></html>

简单测试

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

其中data中存的为我们上传文件的同时，需要的参数。

完整的例子，上传成功并在页面上进行预览。

public class UploadFile : IHttpHandler {  public void ProcessRequest(HttpContext context)  {   context.Response.ContentType = "application/json";   var paras = context.Request.Params["data"];   JObject jobj = JObject.Parse(paras);   string strUserName = jobj["username"].ToString();   HttpFileCollection files = context.Request.Files;   if (files.Count > 0)   {    var file = files[0];    string fileExt = Path.GetExtension(file.FileName);    string fileNewName = Guid.NewGuid() + fileExt;    string strRelativeDir = "/Upload/" + strUserName;    string strDir = context.Request.MapPath(strRelativeDir);    if (!Directory.Exists(strDir))    {     Directory.CreateDirectory(strDir);    }    string strSavePath = Path.Combine(strDir, fileNewName);    file.SaveAs(strSavePath);    context.Response.Write(Path.Combine(strRelativeDir, fileNewName));   }  }  public bool IsReusable  {   get   {    return false;   }  } }