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