写在前面

最近在弄文档库的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. 从0开始学Java——@override的作用

    早上跟着<jsp&Servlet学习笔记>来学习jsp,在使用eclipse创建了一个servlet类之后,发现自动创建的类和书上相比,doGet方法的前面少了@override, ...

  2. [CareerCup] 12.1 Find Mistakes 找程序错误

    12.1 Find the mistake(s) in the following code: unsigned int i; ; i >= ; --i) printf("%d\n&q ...

  3. 关于runtime

    http://www.jianshu.com/p/ab966e8a82e2 看这个网址即可

  4. WP8.1&Win10幸运大转盘源码分享

    先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...

  5. [C++基础]一个比较常用的配置文件/初始化文件读取程序

    在编程中,我们经常会遇到一些配置文件或初始化文件.这些文件通常后缀名为.ini或者.conf,可以直接用记事本打开.里面会存储一些程序参数,在程序中直接读取使用.例如,计算机与服务器通信,服务器的ip ...

  6. [poj2184]我是来水一下背包的

    http://poj.org/problem?id=2184 题意:01背包的变种,就是说有2组值(有负的),你要取一些物品是2阻值的和非负且最大 分析: 1.对于负的很好处理,可以把他们都加上一个数 ...

  7. C#基础知识系列二（值类型和引用类型、可空类型、堆和栈、装箱和拆箱）

    前言 之前对几个没什么理解,只是简单的用过可空类型,也是知道怎么用,至于为什么,还真不太清楚,通过整理本文章学到了很多知识,也许对于以后的各种代码优化都有好处. 本文的重点就是:值类型直接存储其值,引 ...

  8. Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)

    详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  9. Javascript基础系列之（六）循环语句（while语句）

    循环语句的作用是反复的执行同一段代码,尽管分几种不同的类型,但其原理几乎相同:只要给定的条件满足,包含在循环体内的语句会不断执行,一旦条件不再满足则终止. while循环是前测试循环,这意味着是否终止 ...

  10. AngularJS开发指南10：AngularJS依赖注入的详解

    依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前 ...