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事件便可。