angular-file-upload 封装为指令获取图片高宽

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28027903/article/details/75529602

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,height
				reader.onload = function(e) {
					var data = e.target.result;
					//加载图片获取图片真实宽度和高度
					var image = new Image();
					image.onload = function() {
						width = image.width;
						height = image.height;
						scope.uploader.width = width
						scope.uploader.height = height
					};
					image.src = data;
				};
				if (!fileData) return
				reader.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.size
					var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
					return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
				}
			});

			// CALLBACKS

			uploader.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>

注：有什么更好的方法和建议可在下方留言

扫描二维码关注公众号，回复： 2905243 查看本文章