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

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

angular file upload.js 的第一行是

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

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

接下来

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

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

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

  1. angularFileUpload.directive('ngFileSelect',[])//选择
  1. angularFileUpload.directive('ngFileDrop',[]);//拖放
    等方法，具体还没有研究过；
  2.  
  3. 分析完这个插件，接下来就是使用该插件了；
  4.  
  5. 首先引入angularjs库文件和相应插件
  1. <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  2. <script src="http://apps.bdimg.com/libs/angular-file-upload/1.3.1/angular-file-upload.min.js"></script>

下面demo

  1. <body ng-app="appName">
  2. <div ng-controller="ctrlName">
  3.     <div class="container">
  4.         <input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">
  5.     </div>
  6. </div>

关键是js的控制

  1. //注入angularjs 模块和服务
  2. var app = angular.module('appName', ['angularFileUpload']);//创建并添加依赖（upload模块名称）
  3. app.controller('ctrlName',[ '$scope', '$upload', function($scope, $upload) {//$upload是依赖的upload模块的服务名称module.service("$upload",[]）;
    　　//这里可以调用依赖的(upload)模块里提供的方法
  4.     $scope.onFileSelect = function($files) {    //$files:是已选文件的名称、大小和类型的数组
  5.         for (var i = 0; i < $files.length; i++) {
  6.             var file = $files[i];
  7.             console.log(file);
  8.             /*文件上传函数*/
  9.             $scope.upload = $upload.upload({
  10.                 url: 'server/upload/url', //上传的url
  11.                 //method: 'POST' or 'PUT',
  12.                 //headers: {'header-key': 'header-value'},
  13.                 //withCredentials: true,
  14.                 data: {myObj: $scope.myModelObj},
  15.                 file: file, // or list of files ($files) for html5 only
  16.                 //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
  17.                 // customize file formData name ('Content-Disposition'), server side file variable name.
  18.                 //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file'
  19.                 // customize how data is added to formData. See #40#issuecomment-28612000 for sample code
  20.                 //formDataAppender: function(formData, key, val){}
  21.             }).progress(function(evt) {//上传进度
  22.  
  23.                 console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
  24.  
  25.             }).success(function(data, status, headers, config) {
  26.                 // 文件上传成功处理函数
  27.                 console.log(data);
  28.  
  29.             }).error(function(data, status, headers, config) {
  30.                 //失败处理函数
  31.                 console.log('上传失败');
  32.             });
  33.         };
  34.     };
  35. }]);

其他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. CSRF--花式绕过Referer技巧

    CSRF遇到Referer绕过的情况,有条件限制,不一定所有的Refere验证就可以绕过 1.Refere为空条件下 解决方案: 利用ftp://,http://,https://,file://,j ...

  2. 使用第三方工具Cornerstone搭建本地SVNserver

    一.加入版本号资源库 点击Cornerstone左下角REPOSITORIES栏右边的加号button.在弹出的视图中选择File Repository,然后选择Create a New Reposi ...

  3. 将Xcode升级到10.0以上版本，Appium启动报错的问题

    前言 现在的Xcode最新版本都是在10.1,原先使用的版本是9.4.1!结果今天手贱将其升级... 然后,跑IOS自动化时,出现“Xcode version '0.1'. Support for X ...

  4. Android中经常使用的工具类02

    1.读取手机联系人信息 一般用在读取手机通讯录上传,这一块比較多. import java.util.ArrayList; import java.util.List; import android. ...

  5. Linux进程间通信(三) - 信号

    什么是信号 软中断信号(signal,又简称为信号)用来通知进程发生了异步事件.在软件层次上是对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是进程间通 ...

  6. Collect More Jewels(hdu1044)(BFS+DFS)

    Collect More Jewels Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  7. shell 字符串处理汇总（查找，替换等等）

    字符串: 简称“串”.有限字符的序列.数据元素为字符的线性表,是一种数据的逻辑结构.在计算机中可有不同的存储结构.在串上可进行求子串.插入字符.删除字符.置换字符等运算. 字符: 计算机程序设计及操作 ...

  8. oschina git服务, 如何生成并部署ssh key

    1.如何生成ssh公钥 你可以按如下命令来生成 sshkey: ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Generating public ...

  9. html5plus (H5 WebApp)

    是什么? 它是增强版的手机浏览器引擎, 让HTML5达到原生水平, 它提供WebApp的规范. 它结合MUI(前端框架) + HBuilder(开发工具) 即可迅速实现开发一个app. 快速起步? 1 ...

  10. 我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能（三）Android客户端功能实现

    我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能(一)PC服务器端(地址:http://blog.csdn.net/ouyang_pen ...