angular-file-upload 封装为指令获取图片高宽
来源:互联网 发布:淘宝品牌排行榜 编辑:程序博客网 时间:2024/06/05 21:52
directive代码:
app.directive('myUpload', function (FileUploader) { return { restrict: 'AE', replace: true, scope: { uploader: '=', accept:'@accept' }, template: '<input type="file" nv-file-select="" accept="{{accept}}" contenteditable="false" uploader="uploader" />', link: function (scope, element, attributes) { element.bind("change", function (changeEvent) {var fileData = changeEvent.target.files[0];//读取图片数据var reader = new FileReader();var width,heightreader.onload = function(e) {var data = e.target.result;//加载图片获取图片真实宽度和高度var image = new Image();image.onload = function() {width = image.width;height = image.height;scope.uploader.width = widthscope.uploader.height = height};image.src = data;};if (!fileData) returnreader.readAsDataURL(fileData) }); } };})
1、因为angular1的ng-chenge事件无法获取到图片高宽
2、查了angular-file-upload官方api也未找到获取图片高宽的方法
controller代码:
app.controller("myCtrl", ['$scope', 'FileUploader',function($scope, FileUploader) {'use strict';$scope.uploader = new FileUploader({ //图片上传url: ENV.uploadImage,withCredentials: true,removeAfterUpload: true});// FILTERS$scope.uploader.filters.push({name: 'imageFilter',fn: function(item /*{File|FileLikeObject}*/ , options) {$scope.imgSize = item.sizevar type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;}});// CALLBACKSuploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/ , filter, options) {console.info('onWhenAddingFileFailed', item, filter, options);};uploader.onAfterAddingFile = function(fileItem) {console.info('onAfterAddingFile', fileItem);};uploader.onAfterAddingAll = function(addedFileItems) {console.info('onAfterAddingAll', addedFileItems);};uploader.onBeforeUploadItem = function(item) {console.info('onBeforeUploadItem', item);};uploader.onProgressItem = function(fileItem, progress) {console.info('onProgressItem', fileItem, progress);};uploader.onProgressAll = function(progress) {console.info('onProgressAll', progress);};uploader.onSuccessItem = function(fileItem, response, status, headers) {console.info('onSuccessItem', fileItem, response, status, headers);};uploader.onErrorItem = function(fileItem, response, status, headers) {console.info('onErrorItem', fileItem, response, status, headers);};uploader.onCancelItem = function(fileItem, response, status, headers) {console.info('onCancelItem', fileItem, response, status, headers);};uploader.onCompleteItem = function(fileItem, response, status, headers) {console.info('onCompleteItem', fileItem, response, status, headers);};uploader.onCompleteAll = function() {console.info('onCompleteAll');};console.info('uploader', uploader);}}])
html代码:
<my-upload uploader='uploader' accept="image/jpg,image/jpeg,image/png"></my-upload>
注:有什么更好的方法和建议可在下方留言
阅读全文
0 0
- angular-file-upload 封装为指令获取图片高宽
- Angular-File-Upload-Qiniu上传图片至七牛
- Js上传图片 jquery:ajaxfileupload和angular:angular-file-upload
- angularJS扩展指令之-angular-file-upload(整理)
- angular-file-upload
- Angular angular-file-upload 入坑记
- angular-file-upload 中文API
- angular file upload 文件上传
- angular-file-upload 中文API
- angular把echarts封装为指令(配合requirejs)
- angular file upload 队列上传机制
- angular-file-upload angularJS 文件上传
- angular-file-upload的使用总结
- angular 上传文件的插件angular-file-upload
- angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
- Angular指令、service封装经验总结
- 封装获取浏览器宽高
- 获取图片宽高
- Server Tomcat v9.0 Server at localhost failed to start.
- 不存在具有“AppType”的“IEnumerable<SelectListItem>”类型的 ViewData 项
- Android中layer-list使用详解
- CDOJ1073-秋实大哥与线段树 线段树单点更新+区间求和
- ssh框架小结
- angular-file-upload 封装为指令获取图片高宽
- 第1条:考虑用静态工厂方法代替构造器
- C/C++中的static
- Arcgis engine 将两个Geometry对象合并为一个新的Geometry对象,其中GeometryA的值会被修改
- Android 屏幕适配:最全面的解决方案
- 2017(一)linux基础命令
- Scala 学习笔记(四)------定义递归函数
- PS 中的7种投影技
- Unity中使用 slua --- 调用c#方法