angularjs结合plupload实现文件上传
转载注明:(罗志强的博客)
angularjs的指令directive非常好使,可以很方便的结合各种插件,实现很强大的功能。 今天用到了plupload,就拿它举例吧。
正常的plupload用法应该是这样的
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles',
url : "/examples/upload",
});
uploader.init();
而在Angular里面,直接这么写,似乎不太优美,也不符合封装成组件的要求。 那么我们就给plupload做成angular的指令(web组件)。
这里需要注意的是,不要将初始化操作放到Controller里面,否则它可能出错,很多封装其他插件成angular组件时,就是因为初始化顺序问题,导致各种报错。controller的执行在link之前。
var app = angular.module('plupload', []);
/**
* 文件上传指令
* @return {[type]} [description]
*/
app.directive('plupload', ['$timeout', function($timeout) {
return {
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
link: function($scope, iElm, iAttrs, controller) {
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'uploadfile',
url: 'upload.php',
multi_selection: false,
filters: {
max_file_size: '10mb',
mime_types: [{
title: "Image files",
extensions: "jpg,gif,png"
}, {
title: "Zip files",
extensions: "zip"
}]
},
flash_swf_url: '/plupload/Moxie.swf',
silverlight_xap_url: '/plupload/Moxie.xap',
init: {
FilesAdded: function(up, files) {
uploader.start();
},
UploadComplete: function(up, files) {
}
}
});
uploader.init();
}
};
}]);
这样上传插件就算封装完成了。使用的时候,就先引入模块文件,然后引入模块
var app = angular.module('app', [
'plupload'
]);
使用的时候像下面这样。
<button class="btn btn-primary btn-sm" id="uploadfile" plupload>本地上传</button>
如果在 模块app的作用域下, plupload指令就会生效了。
上面代码是从项目里面拿出来修改的,没有经过测验。方便借鉴,如果有什么疑问,联系:(fermi)294052929@qq.com
angularjs结合plupload实现文件上传的更多相关文章
- Node开发文件上传系统及向七牛云存储和亚马逊AWS S3的文件上传
背景起,有奏乐: 有伟人曰:学习技能的最好途径莫过于理论与实践相结合. 初学Node这货时,每每读教程必会Fall asleep. 当真要开发系统时,顿觉精神百倍,即便踩坑无数也不失斗志. 因为同团队 ...
- 文件上传插件 -- plupload
refresh:重新实例化uploader removeFile(id):从file中移除某个文件 splice(start,length):从队列中start开始删除length个文件, 返回被删除 ...
- Plupload文件上传组件使用API
Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...
- 多文件上传artDialog+plupload
一.效果展示 包括文件上传面板以及文件上传列表 二.介绍 长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式. 其中涉及的 ...
- plupload+struts2实现文件上传下载
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
- plupload文件上传插件
一 资源文档 二 基本使用 三 可能遇到的问题 一 资源文档 Git仓库地址:https://github.com/moxiecode/plupload 一个中文速查:http://www.cnblo ...
- 多图片/文件上传 - SwfUpload/PlUpload
<文件上传利器SWFUpload使用指南> <前端上传组件Plupload使用指南>
- web 文件上传组件 Plupload
Plupload官网:点击打开链接 建议下载最新版本号,低版本号会出现浏览器兼容问题. 近期公司有个项目须要在web端使用多文件上传功能.刚開始准备使用HTML5来做.但是IE9下面是都不支持的, ...
- 使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项
首先感谢,http://www.cnblogs.com/2050/p/3913184.html 这篇文章作者. 在使用PLUpload之前个人先封装了一些常用配置,并且将success与error做为 ...
随机推荐
- Farm Irrigation ZOJ 2412(DFS连通图)
Benny has a spacious farm land to irrigate. The farm land is a rectangle, and is divided into a lot ...
- C# 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序。
在菜单 “项目”的最下面 工程属性 菜单,选择“生成”选项卡,将目标平台由“Amy CPU”或者“*64”改成“*86”.
- OA--对于每个form表单(<s:iterator>生成)的处理
由于是后台传过来的,我们不知道form 有几个 也不能指定form的id和name,(其实也可以就是可能会冲突我们还是用下面讲的方法把) 之前有想过 对于每个form 里面都有一些参数,举个例子 项目 ...
- C++ Primer Plus学习:第二章
C++入门第二章:开始学习C++ 进入C++ 首先,以下是一个C++程序: //myfirst.cpp 显示一行文字 #include<iostream> //预处理器编译指令 int m ...
- iOS-UICollectionViewController协议及回调
一.UICollectionViewDataSource 1.返回Section数量的方法 - (NSInteger)numberOfSectionsInCollectionView: (UIColl ...
- JQuery EasyUI 引用加载分析
easyui是什么,就不介绍了,接触到前端的就算没用过,肯定也应该听说过.其次,本文不是介绍它提供如calendar.tree等这些功能如何使用的,这些官网上介绍都很详细,中文的网上也不少.本文是从e ...
- ltnmp 3.0 发布,PHP 开发环境一键安装包
PHP 开发环境一键安装包, 有个叫lnmp.这个ltnmp看起来更新比较多,开发比较频繁,包括的组件更多. 安装和使用教程:http://www.moqifei.com/ltnmp 标记一下.
- BIND的安装配置
简介 bind是dns协议的一种实现,也就是说,bind仅仅是实现DNS协议的一种应用程序 bind运行后的进程名叫named,不叫bind bind bind的配置文件在:/etc/named.co ...
- haproxy入门 (作用: 高可用性,负载平衡和用于TCP和基于http的应用程序的代理)
安装haproxy 1:RPM包安装 yum install -y haproxy 2:编译安装 http://www.haproxy.org/#down 例如安装1.7.9版本 http:/ ...
- MySQL 查询缓存机制(MySQL数据库调优)
查询缓存机制:缓存的是查询语句的整个查询结果,是一个完整的select语句的缓存结果 哪些查询可能不会被缓存 :查询中包含UDF.存储函数.用户自定义变量.临时表.mysql库中系统表.或者包含列级别 ...