之前由于项目需要，决定使用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. 动态注册HttpModule管道,实现global.asax功能

    1.所用类库有 Microsoft.Web.Infrastructure.dll 和WebActivator.dll 2.类代码如下 using System; using System.Collec ...

  2. oracle中直方图的使用

    本文从不绑定变量和绑定变量两种情况讨论直方图的作用 一.不绑定变量 SQL> create table test(name varchar2(10));表已创建.SQL> insert i ...

  3. 解决ListView滑动上下出现阴影

    网上大部分说在listview的属性中通过设置android:fadingEdge="none"来解决问题,需要说明的是是在2.3版本之前有效! 方法一. public class ...

  4. Linux命令提示符的配置

    Linux登录过程中加载配置文件顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~/.bashrc → [/etc/bashrc] ...

  5. [SCOI2009]生日礼物(尺取法)

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2201  Solved: 1186[Submit][Status][Discuss] Descript ...

  6. 九度OJ 1209：最小邮票数 （遍历）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2252 解决:741 题目描述: 有若干张邮票,要求从中选取最少的邮票张数凑成一个给定的总值.     如,有1分,3分,3分,3分,4分五 ...

  7. centos7 PXE自动安装环境搭建

    原理: 要进行自动安装的主机A,加电启动时以网卡为第一启动设备 1.启动时会向网络广播,找到dhcp服务器B请求分配IP地址信息,服务器B除了给其分配基本的IP信息(ip.netmask.getewa ...

  8. Linux c编程：I/O多路复用之select

    一般我们在写socet程序的时候调用的accept,recv等操作都是阻塞型的.意思就是如果我们一直收不到数据那么则会被阻塞.所谓阻塞方式block,顾名思义,就是进程或是线程执行到这些函数时必须等待 ...

  9. 聊聊数据库~6.SQL运维中篇

    上篇回顾:https://www.cnblogs.com/dotnetcrazy/p/10810798.html#top 1.6.5.MySQL日志相关 本文的测试环境:MySQL5.7.26.Mar ...

  10. react create app ，nginx服务器配置

    server{ listen 80; server_name www.domain.com domain.com; location ~* \.js$ { root /home/hard/Projec ...