fileupload指令实现

fileupload指令的实现依赖于fileUploadService与imgupload指令。

fileupload指令的使用:

fileUploadService:

1. uidBase = 10000000;//生成文件上传标识用  fileInputId = ‘uploadFileSubmitInput‘;

2. service对象中的方法:

1)获取文件上传标识:‘fileupload_‘ + (uidBase++)

2)创建上传文件的原生dom元素:input[type=‘file‘], append在body最末,hidden.  创建前要判断是否存在uploadFileSubmitInput元素,如果存在,要删除。

3) native方式上传文件:

获取fileElem.files[0](文件对象)——>创建promise对象——>创建xhr对象——>监听load事件,回调是defer.resolve(e.target.response)——>创建formData——>formdata.append(文件对象)——>xhr.send(data);

load事件回调函数:参数为e, 文件地址在e.target.response.data (response结构是后端定义的)

fileupload directive:

1. template: 应该是把fileupload绑定的元素整个换掉了

2

2. replace: true. transclude: true, require: ‘?ngModel‘--->picUrl

transclude用途:

3. 获取attr引用对象的值:scope.$eval(attrs.ngfOptions);

4. 上传图片完成的回调:参数: data(图片url) ; ngModelCtrl.$setViewValue(data);  scope.$apply();

5. 上传图片按钮点击的回调:设置fileElement可接受的fileType,方法如下图1——>注册fileElem的change事件(files = e.target.files || e.dataTransfer.files)——>判断files[0].size——>判断是否显示文件名字(files[0].name)

——>调用service native方式上传——>成功后执行回调,参数为res.data(文件url))——>触发fileElem的click事件(会弹出文件选择框)

imgUpload与fileupload类似,区别在于上传图片完成的回调函数中new Image对象,将图片缩略图添加到上传按钮下面。

PS:拖拽上传图片,应该是在拖拽区域监听了drop事件,回调是将事件携带的参数(图片对象)上传到服务端。问题是drag事件如何携带的图片或者文件数据呢?

——e.dataTransfer.files就可以了.drop事件要禁用浏览器默认处理。对于组件来说手动触发fileElem.change事件即可。

时间: 2024-11-09 09:48:09

fileupload指令实现的相关文章

百度上传插件WebUploader,angularjs指令封装

1.WebUploader特点 官网地址:http://fex.baidu.com/webuploader/ 1.1 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度. 1.2 预览.压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输. 解析jpeg中的meta信息,对于各种orientation做了正确的处理,同

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

关于makefile中变量的多次赋值以及override指令

1 基本原则如下 1.1 原则1 变量的普通赋值是有先后顺序的,后面的赋值会覆盖掉前面的赋值. 1.2 原则2 使用的时候,用的是其前面最后的赋值,就算其后面有使用了override指令的赋值也不会影响这条原则. 1.3 原则3 当使用了override指令定义赋值了变量后,其后对该变量的所有的赋值都是无效的.但是override之前的所有的赋值都是有效的.使用的时候是往前最近原则. 2 override变量.命令行参数和普通变量之间的屏蔽关系 override变量会屏蔽命令行参数,除非用+=:

【Vue】vue.js常用指令

http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令: v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-on指令

自学linux指令分析-ls

自学linux指令分析-ls 1·命令格式 ls [option] [directory-list] ls [参数][目录名] 2·命令参数    -a, –all 列出目录下的所有文件,包括以 . 开头的隐含文件. -A, –almost-all 列出除了 . 及 .. 以外的任何项目 –author 印出每个文件的作者 -b, –escape 把文件名中不可输出的字符用反斜杠加字符编号的形式列出. –block-size=大小块以指定<大小>的字节为单位 -B, –ignore-backu

Linux中nginx的常见指令

1.启动cd /usr/local/nginxsbin/nginx 2.停止用指令 cd /usr/local/nginx sbin/nginx sbin/nginx -s quit 杀死进程 ps -ef | grep nginx 获取pid kill pid

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

预处理指令

1.预处理指令 即编译之前执行的指令 C中的预处理指令包括:文件包含,宏定义,条件编译 2.文件包含#include <stdio.h> <>和""的区别 #include <file_1.h> //直接在C库函数头文件所在目录下找 #include "file_1.h" //先在main.c所在目录下找,若无到环境变量path路径中找,若无,到C库函数头文件所在目录中找 #include可能会导致重复包含文件,降低编译效率 解决

JAVAWEB开发之Session的追踪创建和销毁、JSP详解(指令,标签,内置对象,动作即转发和包含)、JavaBean及内省技术以及EL表达式获取内容的使用

Session的追踪技术 已知Session是利用cookie机制的服务器端技术,当客户端第一次访问资源时 如果调用request.getSession() 就会在服务器端创建一个由浏览器独享的session空间,并分配一个唯一且名称为JSESSIONID的cookie发送到浏览器端,如果浏览器没有禁用cookie的话,当浏览器再次访问项目中的Servlet程序时会将JSESSIONID带着,这时JSESSIONID就像唯一的一把钥匙  开启服务器端对应的session空间,进而获取到sessi