之前由于项目需要，决定使用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. getOutputStream() has already been called for this response的解决方法

    1.问题描述:spring mvc中下载文件结束后,跳转到list页面,问题报上面的异常. 2.原因:写文件的时候response调用一次,在跳转的时候,spring调用ActionForward类中 ...

  2. SpringBoot Idea 启动报错 Process finished with exit code 1

    问题描述:没有其他任何错误日志,只有Process finished with exit code 1 问题原因:Maven POM.xml问题造成 由于是properties是我直接从其他项目中拷贝 ...

  3. windows_64下python下载安装Numpy、Scipy、matplotlib模块

    本文应用的python3.6.3及其对应的Numpy.Scipy.matplotlib计算模块的cp36版本,其中Numpy是需要MKL版本的Numpy,这是后续安装Scipy的需要(本机系统win7 ...

  4. UVA 10209

    10209 - Is This Integration ? #include <stdio.h> #include <math.h> /* */ //多次错误都是因为我将PI定 ...

  5. struts2中配置文件加载的顺序是什么？

    struts2的StrutsPrepareAndExecuteFilter拦截器中对Dispatcher进行了初始化 在Dispatcher类的init方法中定义了配置文件的加载顺序(下面是源码) p ...

  6. 从零开始搭建android框架系列（转）

    网址:从零开始搭建android框架系列 githup:https://github.com/CameloeAnthony/Ant

  7. JSP的优势

    以下列出了使用JSP带来的其他好处: 与ASP相比:JSP有两大优势.首先,动态部分用Java编写,而不是VB或其他MS专用语言,所以更加强大与易用.第二点就是JSP易于移植到非MS平台上. 与纯 S ...

  8. junit spring 测试

    http://my.oschina.net/dlpinghailinfeng/blog/336694 http://blog.csdn.net/zhangzikui/article/details/1 ...

  9. php != 和 !== 的区别

    == and != do not take into account the data type of the variables you compare. So these would all re ...

  10. PHP-Manual的学习----【语言参考】----【类型】

    2017年7月17日15:18:02      该看Boolean 布尔类型1.PHP 支持 8 种原始数据类型. 2.四种标量类型: ◦ boolean(布尔型)  ◦ integer(整型)  ◦ ...