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