angular-file-upload API angular文件上传插件
官方例子 : 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文件上传插件的更多相关文章
- DVWA(九):File Upload 全等级文件上传
File Upload 文件上传,通常是由于对上传文件的类型没有进行严格的过滤.限制造成的,一般思路是 通过上传木马获取服务器的webshell(通过网络端口对网站服务器某种程度上的操作权限 也叫网站 ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- 7款js文件上传插件
1. jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
随机推荐
- 十个顶级的C语言资源助你成为优秀的程序员
译者言:学习C语言,需要一点一滴,沉下心来,找个安静的地方,泡上一杯咖啡,在浓郁的香味中一起品味她.(by Boatman Yang) 人们通常认为计算机编程很烦,但是有些人却从中发现了乐趣.每一个程 ...
- Part 64 to 66 Talking about Indexers in C#
Part 64 - C# Tutorial - How and where are indexers used in .net Part 65 - C# Tutorial - Indexers in ...
- 【转载】PHP程序员的技术成长规划
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- jQuery 判断是否为数字的方法 及 转换数字函数
<script language="javascript"> var t=$("#id").val();//这个就是我们要判断的值了 if(!isN ...
- JavaScript语言常量和变量
我们在以往介绍使用JavaScript编写一个HelloJS的小程序,其中我们就用到变量.常量和变量是构成表达式的重要组成部分.常量在声明和初始化变量时,在标识符的前面加上关键字const,就可以把该 ...
- SpringMvc入门五----文件上传
知识点: SpringMvc单文件上传 SpringMvc多文件上传 这里我直接演示多文件上传,单文件的上传就不说了,不过代码都是现成的. 效果预览: DEMO图: 添加文件上传j ...
- ZigBee协议基本介绍
ZigBee是一种短距离(10~100米).低速率(20~250Kbps).底成本.低功耗的无线网络技术,主要用于近离无线通讯.能够做到在数千个微小的传感器之间相互协调实现通讯,这些传感器只需要很少的 ...
- DEDECMS中,文章页直接输出字段名
文章页中,可直接输出字段名
- ADO.NET笔记——使用Command执行增删改操作,通过判断ExecuteNonQuery()返回值检查是否操作成功
相关知识: ExecuteNonQuery()方法:执行CommandText属性所制定的操作,返回受影响的记录条数.该方法一般用来执行SQL中的UPDATE.INSERT和DELETE等操作 对于U ...
- Jexus 高并发请求的优化技巧 笔记
Jexus web server 5.1 每个工作进程的最大并发数固定为1万,最多可以同时开启4个工作进程,因此,每台Jexus V5.1服务器最多可以到支持4万个并发连接.但是,按照linux系统的 ...