之前由于项目需要，决定使用angularjs做前端开发，在前两个项目中都有文件上传的功能，因为是刚接触angularjs，所以对一些模块和模块间的依赖不是很了解。都是由其他大神搭好框架，我只做些简单的填充。

现在拿出些时间来研究一下。主要针对一些插件的用法，现总结一下（以file upload 为例）：

angular file upload.js 的第一行是

var angularFileUpload = angular.module('angularFileUpload', []);

这里他定义了一个angular模块，名称是angularFileUpload，不依赖其他模块；

接下来

angularFileUpload.service('$upload', ['$http', '$timeout', function($http, $timeout) {...})

在这个模块上创建了一个服务，名称是$upload，依赖'$http', '$timeout'两个内置模块（方法函数）；

在这个模块的内部使用directive，创建了一些指令方法：

angularFileUpload.directive('ngFileSelect',[])//选择
angularFileUpload.directive('ngFileDrop',[]);//拖放
等方法，具体还没有研究过；

分析完这个插件，接下来就是使用该插件了；

首先引入angularjs库文件和相应插件
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script src="http://apps.bdimg.com/libs/angular-file-upload/1.3.1/angular-file-upload.min.js"></script>

下面demo

<body ng-app="appName">

<div ng-controller="ctrlName">

    <div class="container">

        <input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">

    </div>

</div>

关键是js的控制

//注入angularjs 模块和服务

var app = angular.module('appName', ['angularFileUpload']);//创建并添加依赖（upload模块名称）

app.controller('ctrlName',[ '$scope', '$upload', function($scope, $upload) {//$upload是依赖的upload模块的服务名称module.service("$upload",[]）;
　　//这里可以调用依赖的(upload)模块里提供的方法

    $scope.onFileSelect = function($files) {    //$files:是已选文件的名称、大小和类型的数组

        for (var i = 0; i < $files.length; i++) {

            var file = $files[i];

            console.log(file);

            /*文件上传函数*/

            $scope.upload = $upload.upload({

                url: 'server/upload/url', //上传的url

                //method: 'POST' or 'PUT',

                //headers: {'header-key': 'header-value'},

                //withCredentials: true,

                data: {myObj: $scope.myModelObj},

                file: file, // or list of files ($files) for html5 only

                //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)

                // customize file formData name ('Content-Disposition'), server side file variable name.

                //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file'

                // customize how data is added to formData. See #40#issuecomment-28612000 for sample code

                //formDataAppender: function(formData, key, val){}

            }).progress(function(evt) {//上传进度

                console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));

            }).success(function(data, status, headers, config) {

                // 文件上传成功处理函数

                console.log(data);

            }).error(function(data, status, headers, config) {

                //失败处理函数

                console.log('上传失败');

            });

        };

    };

}]);

其他angularjs 插件的使用方法，应该和这个差不多，自己是个小菜，正在研究，欢迎大神指正；

写的不是很清楚，后续在总结；

angularjs file upload插件使用总结的更多相关文章

  1. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  2. JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。

    本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.i ...

  3. jquery file upload + asp.net 异步多文件上传

    百度了很久,国内一直 找不到 使用jquery file upload 插件 +asp.net 的相关代码 一开始使用 jquery uploadify ,一款基于 flash的插件,但是不支持 Sa ...

  4. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

  5. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

  6. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  7. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  8. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  9. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

随机推荐

  1. 【Python + Selenium】之JS定位总结

    感谢:小琰子 Python+Selenium 脚本中的一些js的用法汇总: 1.滚动条 driver.set_window_size(500,500) js = "window.scroll ...

  2. Java 异常介绍

    Java标准库内建了一些通用的异常,这些类以 Throwable 为顶层父类.Throwable又派生出 Error 类和 Exception 类. 错误:Error类以及他的子类的实例,代表了JVM ...

  3. IEnumerable, IEnumerator接口

    IEnumerable接口 // Exposes the enumerator, which supports a simple iteration over a non-generic collec ...

  4. saltstack之用户管理

    1.添加用户 /srv/salt/top.sls base: 'test82.salt.cn': - user.useradd /srv/salt/user/useradd.sls jim: user ...

  5. 安卓常用的xml控件配件的使用包含shape，declare-styleable、selector

    今天就讲我所遇到的常用到的一些通过xml文件制作的背景效果,以后用到的话就直接使用啦!哈哈,我一向就是这么懒! 接下来,就开始介绍了 1.shape的使用,可以混合使用 xml控件配置属性 andro ...

  6. 九度OJ 1261：寻找峰值点 （基础题）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:500 解决:37 题目描述: 给定一个整数序列,该整数序列存在着这几种可能:先递增后递减.先递减后递增.全递减.全递增. 请找出那个最大值的 ...

  7. nginx学习之进程控制篇（三）

    1. 进程 nginx有一个master进程和一个或多个工作进程. master process worker process or master process worker process wor ...

  8. [postfix]添加黑名单

    最近公司员工的邮箱总是收到twoomail.com的邀请邮件,邮箱服务器还没有添加过黑名单呢,就拿它开刀吧. 在主配置文件中添加如下配置 #vi /etc/postfix/main.cf #black ...

  9. 【题解】国家集训队礼物(Lucas定理)

    [国家集训队]礼物(扩展Lucas定理) 传送门可以直接戳标题 172.40.23.20 24 .1 答案就是一个式子: \[ {n\choose \Sigma_{i=1}^m w}\times\pr ...

  10. PHP安全编程之php.ini配置

    1.register_globals=On <?php//ex1.php  if(check_admin())  {  $is_admin=true;  }  if($is_admin)  {  ...