写在前面

最近在弄文档库的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. 【.NET】传智播客第【19】期就业班视频（高清无加密）

    [.NET]传智播客第[19]期就业班视频(高清无加密) 下载地址:http://fu83.cn/thread-85-1-1.html

  2. python数字图像处理（6）：图像的批量处理

    有些时候,我们不仅要对一张图片进行处理,可能还会对一批图片处理.这时候,我们可以通过循环来执行处理,也可以调用程序自带的图片集合来处理. 图片集合函数为: skimage.io.ImageCollec ...

  3. 开发机上绕过Chrome同源策略的办法

    开发机上绕过Chrome同源策略的办法 标签: Chrome同源策略跨域 2013-08-21 18:33 6071人阅读 评论(0) 收藏 举报  分类: Chrome扩展(1)  版权声明:本文为 ...

  4. [VIM] 格式化代码

    快速使用vim格式化代码 在vim的编辑模式i下直接ESC退出道命令模式之后直接敲入如下命令: gg=G        将全部代码格式化 nG=mG    将第n行到第m行的代码格式化 注:如果ESC ...

  5. Java系列：《Java核心技术 卷一》学习笔记，cchapter11 异常

    11.1.1 异常分类     如果一个程序出现了RuntimeException,那么就一定是你的问题. 11.1.2 声明已检测异常     如果子类覆盖了父类的一个方法,那么子类方法中声明的检查 ...

  6. 集中式版本控制系统：从svn到tfs

    06年进公司的时候,我们没有使用版本控制系统,所有代码都在部门经理的电脑上放着,谁要改什么代码就过去要一份最新的,改好之后再放回去,感觉好原始.据说之前是用过一段时间微软的vss(visual.sou ...

  7. json跨域原理及解决方法

    这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...

  8. Yii2-Redis使用小记 - Cache

    前些天简单学习了下 Redis,现在准备在项目上使用它了.我们目前用的是 Yii2 框架,在官网搜索了下 Redis,就发现了yii2-redis这扩展. 安装后使用超简单,打开 common/con ...

  9. 【Lucene实验1】构建索引

    一.实验名称:构建索引 二.实验日期:2013/9/21 三.实验目的: 1)        能理解Lucene中的Document-Field结构的数据建模过程: 2)        能编针对特定数 ...

  10. mac版beyond compare 4 中对比class文件

    http://www.scootersoftware.com/download.php?zz=moreformats 这个网址中没有mac版本的class文件对比的file format.只能自己造了 ...