写在前面

最近在弄文档库的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. matlab中fopen 和 fprintf函数总结

    matlab中fopen函数在指定文件打开的实例如下: *1)"fopen"打开文件,赋予文件代号. 语法1:FID= FOPEN(filename,permission) 用指定 ...

  2. 解放双手：如何在本地调试远程服务器上的Node代码

    写在前面 谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍 如何在本地通过nod ...

  3. Bootstrap系列 -- 16. 文本域textarea

    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...

  4. js的设计模式

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...

  5. Boostrap(4)

    1.按钮 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  6. SequoiaDB 系列之四 ：架构简析

    在本系列的第一篇中,简述了SequoiaDB的安装,以及一个(伪)集群的部署 第二篇和第三篇对SequoiaDB的集群,做了简单地操作. 在本篇中,将对SequoiaDB的架构进行简单的分析. 因为自 ...

  7. 第一章 ： javaScript框架分类及主要功能

      从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的j ...

  8. 解决 SQL Server Profiler 跟踪[不断]出现检索数据

    问题简单回顾: 当我们使用SQL Server Profiler根据数据时,有时刚打开什么也没干呢,就显示很多数据了,当我们用橡皮擦清除,没过两秒就又有了,如图: 是不是很恼火!~不怕,解决方案如下: ...

  9. 关于js的string的3个函数slice,substring,substr对比

    slice,substring,substr三个函数都是截取字符串,但是对参数的处理有区别 参数处理相似的两个函数式slice和substring slice(start,end)和substring ...

  10. Ibatis学习总结3--SQL Map XML 映射文件

    在前面的例子中,只使用了 SQL Map 最简单的形式.SQL Map 的结构中还有其他更多 的选项.这里是一个 mapped statement 较复杂的例子,使用了更多的特性. <sqlMa ...