[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;   }  } } 

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

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

总结

使用ng-file-upload可以很好的与angularjs结合。在使用的时候,查找了一下angularjs相关的文件上传的例子,如果浏览器支持html5,那也可以很方便的制作进度条,另外该组件也支持多文件上传。推荐给大家。

你可以去这里进行下载: https://github.com/danialfarid/ng-file-upload

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » [Angularjs]ng-file-upload上传文件

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址