之前由于项目需要，决定使用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. js-音乐播放器，播放|暂停|滑块的功能

    音乐播放器,播放|暂停|滑块的功能 document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = ...

  2. [ERROR] Error generating R.java from manifest

    把*.js文件用记事本打开,再保存为utf-8的编码覆盖,把build文件夹的文件删掉,启动.可以运行了.(在这之前试过把jdk的几个文件考到平台工具下的动作)

  3. [转]const指针与指向const的指针

    经常忘记,保存一下.. #include <iostream> using namespace std; int main(int argc, char *argv[]) { ; int ...

  4. 基于markdown的blog系统调研1：typecho

    ))

  5. parse arguments in bash

    There are lots of ways to parse arguments in sh. Getopt is good. Here's a simple script that parses ...

  6. Spring Cloud 微服务四：熔断器Spring cloud hystrix

    前言:在微服务架构中,一般都是进程间通信,有可能调用链都比较长,当有底层某服务出现问题时,比如宕机,会导致调用方的服务失败,这样就会发生一连串的反映,造成系统资源被阻塞,最终可能造成雪崩.在sprin ...

  7. 闪屏Flash动画

    这个也比较简单,之前也做过不少 今天这个就为了方便日后使用,希望大家都可以借鉴借鉴啊! @ViewInject(R.id.linMain) private LinearLayout linMain; ...

  8. GCD(st表+二分)

    GCD Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  9. iOS开发之获取系统相册ALAssetLibrary

    注:当你选择看这篇博客时想必你的应用还支持iOS8一下系统,如果你的应用要求最低版本大于iOS8,建议使用PhotoKit框架,效率更高 ALAssetsLibrary包含,ALAssetsLibra ...

  10. Webpack探索【3】--- loader详解

    本文主要说明Webpack的loader相关内容.