写在前面

最近在弄文档库的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 httpPOST/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>

简单测试

其中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 > )

            {

                var file = files[];

                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;

            }

        }

    }

总结

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

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

[Angularjs]ng-file-upload上传文件的更多相关文章

  1. Struts Upload上传文件

    1.Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.te ...

  2. php 下 html5 XHR2 + FormData + File API 上传文件

    FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...

  3. element-ui upload上传文件并携带参数 使用formData对象

    需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...

  4. thinkphp Upload上传文件在客户端生成的临时文件$_FILES['file']['tmp_name']

    1.关于thinkphp 的Upload的$_FILES['file']['tmp_name'] 在使用thinkphp上传图片的时候,在上传的$_FILES数组中,有一个$_FILES['file' ...

  5. angularJS 在edge浏览器上传文件，无法主动触发ng-click

    今天发现的问题 在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用. 代码参考我的另一篇博客:WebAPI Angularjs 上传文件 不能运行的原因 下图红框中的代码在edge浏览器中无法执 ...

  6. input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  7. SSH Secure File Transfer上传文件错误：encountered 1 errors during the transfer解决办法

    在使用SSH 工具向Linux服务器上传文件时,弹出 encountered 1 errors during the transfer 错误. 解决方案: 1.准备上传的那个文件所在目录路径存在(), ...

  8. ie8及其以下版本兼容性问题之input file隐藏上传文件

    文件上传时,默认的file标签很难看,而且每个浏览器下都有很大差距.因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它.但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按 ...

  9. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

  10. input type file onchange上传文件的过程中，同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

随机推荐

  1. 实验三实验报告 20135324&&20135330

    北京电子科技学院(BESTI) 实验报告 课程:深入理解计算机系统 班级:1353 姓名:张若嘉 杨舒雯 学号:20135330 20135324 成绩: 指导教师:娄嘉鹏 实验日期:2015.11. ...

  2. 超全！iOS 面试题汇总

    之前看了很多面试题,感觉要不是不够就是过于冗余,于是我将网上的一些面试题进行了删减和重排,现在分享给大家.(题目来源于网络,侵删) 1. Object-c的类可以多重继承么?可以实现多个接口么?Cat ...

  3. Android响应式界面开发要点

    现在很多项目需要到达同一个Apk既可以在Phone上跑也尅在tablet上跑,即界面要适应不同尺寸和类型的需要而自动调整.这个即为响应式设计.在web开发商响应式设计已经是个常谈的内容了,而对于and ...

  4. 你的C#代码是怎么跑起来的（一）

    写了那么多C#代码,大家有没有想过自己写的代码编译后的可执行文件内部是什么样子,是怎样在系统上运行的? 编译成exe,然后双击exe文件运行,这中间到底发生了些什么呢,这篇先来剖析下exe内部的样子: ...

  5. [Aaronyang] 写给自己的WPF4.5 笔记[3MenuItem中的icon]

    敢于尝试,就等于你已经向成功迈出了第一步 --Aaronyang的博客(www.ayjs.net)-www.8mi.me =============时隔两年后再看WPF========== 因为以前的 ...

  6. HTML5——地图应用

    我们就拿百度地图举例吧: 废话少说,直接上Demo 简要截图如下:' 简要代码如下: <!DOCTYPE html> <html> <head> <title ...

  7. JSP中<base href="<%=basePath%>">的作用

    来源于:http://fanshuyao.iteye.com/blog/2097229 首先了解是什么是<base href=""> <base href=&qu ...

  8. usefull-url

    http://www.johnlewis.com/ http://codepen.io/francoislesenne/pen/aIuko http://www.rand.org/site_info/ ...

  9. new-nav-html

    <header id="masthead" class="masthead" role="banner"> <h1 cla ...

  10. 【BZOJ 3732】 Network Kruskal重构树+倍增LCA

    Kruskal重构树裸题, Sunshine互测的A题就是Kruskal重构树,我通过互测了解到了这个神奇的东西... 理解起来应该没什么难度吧,但是我的Peaks连WA,,, 省选估计要滚粗了TwT ...