官方例子 : http://nervgh.github.io/pages/angular-file-upload/examples/simple/

===Directives===

nvFileSelect  在<input type="file" />上使用通过验证之后文件将会被添加到上传队列.
nvFileDrop   设置一个拖拽区域,一般都是设置在body上面
nvFileOver    设置一个拖拽文件将要被放在拖拽区域的时候,添加这个指令的元素会改变class,默认元素会获得 class="nv-file-over",可以通过over-class设置自定义的class  :  over-class="className".

===nav-file-drop===

<!-- minimal -->
<element nv-file-drop uploader="{FileUploader}"></element>
<!-- maximal -->
<element nv-file-drop uploader="{FileUploader}" options="{Object}" filters="{String}"></element>
uploader属性 必须是 FileUploader 的实例.
options 可以是{FileItem} 的 options 或者自定义属性集合.
filters是一个包含过滤器的字符串,名字之间用逗号隔开。例如: 'filterName1, filterName2'. These filters must be predefined:
定义filters
uploader.filters.push({name:'filterName1', fn:function() { 代码 }});
uploader.filters.push({name:'filterName2', fn:function() { 代码 }});

===nv-file-select===
nv-file-select uploader="{FileUploader}"/>
<!-- maximal -->
<input type="file" nv-file-select uploader="{FileUploader}" options="{Object}" filters="{String}"/>

===nv-file-over===

<!-- minimal -->
<element nv-file-over uploader="{FileUploader}"></element>
<!-- maximal -->
<element nv-file-over uploader="{FileUploader}" over-class="{String}"></element>

注入服务 FileUploader

===FileUploader===

属性--properties
• url {String}: 服务器接口地址
• alias {String}: 存储文件的名字默认是file

下面是想后台请求的一个例子

angular.module('app', ['angularFileUpload']).controller('AppController', function($scope, FileUploader) {
    $scope.uploader = new FileUploader({
        alias:'yyyy',
        url:'/uploadTest/1.php'
    });
    console.log($scope.uploader)
    $scope.see=function(){
        console.log($scope.uploader)
    }
    $scope.uploader.onSuccessItem = function(fileItem, response, status, headers) {
            //console.info(status, headers);
            console.log(response)
        };
});

response的输出是注意键值

• queue {Array}: 待上传文件数组
• progress {Number}: 上传进度,只读
• headers {Object}: Headers 只支持html5浏览器.
• formData {Array}: 和文件一同发送的数据
• filters {Array}: 过滤器,只有符合条件的文件才会被添加到上传队列
• autoUpload {Boolean}: 当文件添加到队列中后是否自动上传 默认是 false
• method {String}: 请求方式默认是POST请求.
• removeAfterUpload {Boolean}: 上传之后是否从队列中删除文件
• isHTML5 {Boolean}: 上传是不是html5方式.
• isUploading {Boolean}: 是否正在上传.
• queueLimit {Number} : 队列可容纳最大文件数
• withCredentials {Boolean} : 跨域. HTML5 browsers only.

angular-file-upload API angular文件上传插件的更多相关文章

  1. DVWA(九):File Upload 全等级文件上传

    File Upload 文件上传,通常是由于对上传文件的类型没有进行严格的过滤.限制造成的,一般思路是 通过上传木马获取服务器的webshell(通过网络端口对网站服务器某种程度上的操作权限 也叫网站 ...

  2. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  3. 7款js文件上传插件

    1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...

  4. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  5. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  6. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  7. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  8. bootstrap File Input 多文件上传插件使用记录(二)删除原文件

    在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...

  9. (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...

  10. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

随机推荐

  1. MySQL之不能保存表格问题

    有时候我们制作表格不能保存时出现这样的提示: 我们打开工具: 把“阻止保存要求重新创建表的更改”选项的勾给去了:

  2. ASP.NET Ajax核心对象

    本章学习目标 主要掌握AJAX的基本概念和实现机制,学习并创建XMLHttpRequest对象,使用XMLHttpRequestObject对象获取服务器端的数据 主要内容如下,请点击ASP.NET ...

  3. Android 图片开发内幕系列第一篇

    前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...

  4. Android webkit 事件传递流程详解

    前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题.所以索性研究了一下keyevent 事件的传递流程. frameworks 层 keyevent ...

  5. 虚拟机中Linux安装Tools

    1. 插入光盘后将文件拷贝到常用放置软件的目录 2. 解压文件 3. 然后进入解压后的文件夹里找到安装文件进行安装(注意使用root权限安装) 4. 安装时也是一个交互的过程 5. 完成安装

  6. ie、IE兼容模式,提示SCRIPT1028: 缺少标识符、字符串或数字

    旧版ie下json最后一项是不允许有逗号的 为了更好的兼容各个浏览器,json最后的逗号最好不加

  7. 工作单元(Unit of Work)

    维护受业务事务影响的对象列表,并协调变化的写入和并发问题的解决. 从DB中存取Data时,必须记录增删改动作,以将对DB有影响的数据写会到DB中去. 如果在每次修改对象模型时就对DB进行相应的修改,会 ...

  8. 南阳理工ACM——106背包问题

    描述: 现在有很多物品(它们是可以分割的),我们知道它们每个物品的单位重量的价值v和重量w(1<=v,w<=10):如果给你一个背包它能容纳的重量为m(10<=m<=20),你 ...

  9. VS2010恢复默认编辑环境的设置

    VS2010恢复默认编辑环境的设置 VS2010在安装完成后初次打开的时候可以设置自己常用的环境为默认打开的编辑环境, 也可以在打开IDE以后通过如下步骤设置默认环境: Tools->Impor ...

  10. 解决ubuntu 14.04 下eclipse 3.7.2 不能启动,报Could not detect registered XULRunner to use 或 org.eclipse.swt.SWTError: XPCOM 等问题的处理

    对于eclipse 3.7.2在ubuntu 14.04下不能启动,需要在 eclipse/configuration 目录下的config.ini文件内增加一行org.eclipse.swt.bro ...