写在前面

最近在弄文档库的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. [CareerCup] 4.8 Contain Tree 包含树

    4.8 You have two very large binary trees: Tl, with millions of nodes, and T2, with hundreds of nodes ...

  2. 做leetcode的几点体会分享（转）

    1 大部分题目你都是可以自己做出来的.所以,第一遍尽量不要网上找答案: 2 写了的不管通过的,不通过的答案要保存下来.不通过的,也要记录下来哪儿没有通过.很有可能你这次错了,不知道怎么搞过了,下次还是 ...

  3. 20135316王剑桥 linux第十二周课实验笔记

    第十二章并发编程 1.如果逻辑控制流在时间上重叠,那么它们就是并发的.这种现象,称为并发(concurrency). 2.为了允许服务器同时为大量客户端服务,比较好的方法是:创建并发服务器,为每个客户 ...

  4. UIButton利用分类扩展方法（封装）

    UIButton+BackgroundColor.h #import <UIKit/UIKit.h> @interface UIButton (BackgroundColor) - (vo ...

  5. maven编译设置pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. Bootstrap系列 -- 33. 等分按钮

    等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名. <div class="bt ...

  7. JS截取字符串常用方法

    reference:http://www.jb51.net/article/42482.htm 使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字 ...

  8. grunt安装

    随着node的流行,各种后台的技术应用到前端,依赖注入.自动化测试.构建等等. 本篇就介绍下如何使用Grunt进行构建. grunt安装 由于grunt依赖于nodejs,因此需要先安装nodejs. ...

  9. java多线程-Semaphore信号量使用

    介绍 信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用的一种设施, 它负责协调各个线程, 以保证它们能够正确.合理的使用公共资源. 概念 Semaphore分为单值和多值两种,前者 ...

  10. Missing message for key "err1" in bundle "(default bundle)" for locale zh_CN

    这个问题是: 你的使用了ApplicationResources_zh_CN.properties文件没有找到. 1.是struts-config.xml中的<message-resources ...