回顾

  由于工作内容比较多,特别是架构方面,需要耗费很多的时间调整、重构,因此很久没有写文章了。

  话就不多说了,直接进入主题。

实现

  首先分析一下SWFUpload初始化的时候,需要传入当前触发上传的元素,正好定义directive时,link方法的第二参数就是dom元素对象,只是这个对象是angular.element,因此在不需要考虑其他的因素的情况下,我们先简单实现一个可以用的,然后再一步步加深,代码如下:

//angularjs
ahl.directive('ucUpload', [
function () {
return function (scope, el, attrs) {
new SWFUpload({
upload_url: attrs.url,
file_post_name: attrs.postName || 'file',
file_size_limit: attrs.limitSize || '2mb',
file_types: '*.png',
file_types_description: attrs.desc || '文件',
button_placeholder: el[0],
button_width: el[0].offsetWidth,
button_height: el[0].offsetHeight,
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
flash_url: '/swfupload.swf',
debug: false,
prevent_swf_caching: true
});
};
}
]); //html
<div url="/file/uploadForShopLogo" uc-upload></div>

  由于实现的是最简单的版本,页面上绑定的元素能够触发上传文件的窗口,如果想要进一步要求文件的类型,那么可以扩展attrs,增加相应的支持。

  但是在真实的应用环境中,如果不是通用组件,那么组件是根据业务提取的,因此所支持的类型一般是固定的,于是只需要在代码内部增加常量来代表相应的类型,而组件只需要提供类型就可以了,代码修改如下:

//angular
var TPYE = {
image: '*.jpg;*.jpeg;*.gif;*.png'
};
//其他代码
return function (scope, el, attrs) {
new SWFUpload({
//其他代码
file_types: TYPES[attrs.type]
});
}; //html
<div type="image" url="/file/uploadForShopLogo" uc-upload></div>

  接下来,开始实现上传过程当中的几个事件,基本上会用到的有如下几个:file_queued_handler、file_queue_error_handler、upload_progress_handler、upload_success_handler,事件的具体作用我就不多说了。

  只要在指令中定义几个属性与以上事件对应就行,由于file_queued_handler和file_queue_error_handler相似,只要一个事件,第一个参数用error来区分以上2个方法就可以了,代码如下:

//angular
var QUEUE_ERROR = {};
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT] = '文件超过限制大小';
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE] = '不允许上传空文件';
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.INVALID_FILETYPE] = '不支持上传此格式的文件';
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED] = '超过最大可上传数量'; return {
scope: {
//文件上传过程中
progress: '&',
//文件加入队列时
queued: '&',
//文件上传成功
success: '&'
},
link: function (scope, el, attrs) {
var swf;
var opts = {
upload_url: attrs.url,
file_post_name: attrs.postName || 'file',
file_size_limit: attrs.limitSize || '2mb',
file_types: TPYES[attrs.type],
file_types_description: attrs.desc || '文件',
button_placeholder: el[0],
button_width: el[0].offsetWidth,
button_height: el[0].offsetHeight,
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
flash_url: '/swfupload.swf',
debug: false,
prevent_swf_caching: true
}; if (attrs.limitQueueSize)
opts.file_queue_limit = parseInt(attrs.limitQueueSize); if (attrs.queued) {
var queued = scope.queued();
opts.file_queued_handler = function (file) {
queued(null, file); swf.startUpload();
}; opts.file_queue_error_handler = function (file, errno) {
queued(QUEUE_ERROR[errno], file);
};
} if (attrs.progress) {
var progress = scope.progress();
opts.upload_progress_handler = function (file, currentSize, totalSize) {
progress({
file: file,
currentSize: currentSize,
totalSize: totalSize
});
};
} if (attrs.success) {
var success = scope.success();
opts.upload_success_handler = function (file, json) {
var res = JSON.parse(json);
res.file = file;
success(res);
}
} swf = new SWFUpload(opts);
}
}; //html
<div queued="onQueued" url="/file/uploadForShopLogo" uc-upload></div>

  组件使用的过程当中,可能不需要进度、也可能不需要其他的事件,因此编写组件的时候,可以灵活点,多增加一些判断以防某些特殊的情况。

  如果上传时,需要参数支持,只需要利用scope.$watch监听对应属性的变化,如果属性有效,则直接使用swf.setPostParams进行参数设置即可,这里就不给出相应的代码了。

结尾

  这次分享的基于SWFUpload的angular组件就到这里了,谢谢各位,如果还有其他的问题,欢迎留言。

基于SWFUpload的angular上传组件的更多相关文章

  1. vue大文件上传组件选哪个好?

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  2. Flash上传组件之SWFUpload文件上传

    一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而 ...

  3. 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  4. 使用swfupload上传超过30M文件,使用FLASH上传组件

    原文:使用swfupload上传超过30M文件,使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传,既能很友好的显示上传进度,又能完全满足大文件的上传. 后来服务 ...

  5. 基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  6. (转)基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...

  7. 基于tornado python pandas和bootstrap上传组件的mongodb数据添加工具

    总体思路:基于bootstrap4的前端页面上传组件,把excel文件上传至服务器,并利用python pandas读取里面的数据形成字典列表 通过pymongo 接口把数据插入或追加到mongodb ...

  8. Python开发篇——基于React-Dropzone开发上传组件

    这次我要讲述的是在React-Flask框架上开发上传组件的技巧.我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架--React-Bootstrap.Ant Design.M ...

  9. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

随机推荐

  1. C++ 标准IO库

    <C++ Primer 4th>读书笔记 C++ 的输入/输出(input/output)由标准库提供.标准库定义了一族类型,支持对文件和控制窗口等设备的读写(IO).还定义了其他一些类型 ...

  2. 汇编int21h,DOS调用(转)

    表:DOS系统功能调INT 21H AH 功能 调用参数 返回参数 00 程序终止(同INT 20H) CS=程序段前缀 01 键盘输入并回显 AL=输入字符 02 显示输出 DL=输出字符 03 异 ...

  3. 关于SQL SERVER的N前缀的理解

    加N前缀指定后面的字符串为UNICODE常量, SQL Server 的 标准中的国家字符数据类型.SQL 使用前缀字符 N 标识这些数据类型及其值. , ),使用 个 个 Unicode字符时,使用 ...

  4. atitit.web的动态include 跟变量传递 java .net php

    atitit.web的动态include 跟变量传递 java .net php 1. 动态include  <jsp:include 1 2. 使用QueryString 1 3. 使用Ses ...

  5. 24单行插入与批量插入-insert(必学)-天轰穿sqlserver视频教程

    大纲:insert语句,简单插入数据与批量插入数据 为了冲优酷的访问量,所以这里只放优酷的地址了,其实其他网站还是都传了的哈. 代码下载http://www.cnthc.com/?/article/1 ...

  6. Arduino单片机使用和开发问题记录

    1.将程序上传到板子时Arduino IDE提示“avrdude: stk500_getsync(): not in sync: resp=0x00” 网上查遇到这个问题的人比较多,有说驱动问题的,有 ...

  7. mybatis 3.2.3 maven dependency pom.xml 配置

    <dependency>      <groupId>org.mybatis</groupId>      <artifactId>mybatis< ...

  8. ASP.NET弹出显示ex.Message异常信息 存在换行符和回车符处理办法。

    1.把ex.Message换成任意字符串,检验在catch语句块中可以用Response.Write方法显示对话框.结果显示成功,说明问题就出在ex.Message上. 2.在程序中下断点,可以看到e ...

  9. 软件包管理 之 RPM 基础 《RPM 的介绍和应用》

    RPM 是 Red Hat Package Manager 的缩写,本意是Red Hat 软件包管理,顾名思义是Red Hat 贡献出来的软件包管理:在Fedora .Redhat.Mandriva. ...

  10. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...