锐客网

  1. 首页 > it技术 > >

fileupload指令实现

fileupload指令的实现依赖于fileUploadService与imgupload指令。
fileupload指令的使用：
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绑定的元素整个换掉了
fileupload指令实现
文章图片
2
2. replace: true. transclude: true, require: '?ngModel'--->picUrl
transclude用途：
fileupload指令实现
文章图片

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事件（会弹出文件选择框）
fileupload指令实现
文章图片


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

PS：拖拽上传图片，应该是在拖拽区域监听了drop事件，回调是将事件携带的参数（图片对象）上传到服务端。问题是drag事件如何携带的图片或者文件数据呢？
——e.dataTransfer.files就可以了.drop事件要禁用浏览器默认处理。对于组件来说手动触发fileElem.change事件即可。

转载于:https://www.cnblogs.com/AngelaDuoduo/p/5682198.html

    推荐阅读


    上一篇：开发工具|Eclipse 安装JavaEE插件

    下一篇：mysql|mysql 获取数学成绩最高以及最低的同学