<div class="new-img" file-dropzone="[image/png, image/jpeg, image/gif]" file="project.image" file-name="project.imageFileName" data-max-file-size="3">
<img ng-init=" file='/static/images/drag-drop-icon.jpg'" ng-src={[{file}]} class="img-project" width="154px" height="115px" />
</div>
尝试这个
App.directive('fileDropzone', function() {
return {
restrict: 'A',
scope: {
file: '=',
fileName: '='
},
compile: function(element, attrs){
//var clases = attrs.hasOwnProperty('class') ? attrs.class : "";
var divInputFile = angular.element('<div></div>');
divInputFile.css('width','150px').css('height','50px').css('overflow','hidden');
var divChooseImg = angular.element('<div></div>');
divChooseImg.addClass('choose-img');
var buttonChooseImg = angular.element('<button></button>');
buttonChooseImg.css('width','110px').css('height','30px').css('position','relative').css('top','-5px').css('left','-5px');
var liChooseImg = angular.element('<li>Elegir imagen</li>');
var inputFile = angular.element('<input></input>');
inputFile.attr('type','file').attr('name','upload').css('font-size','40px').css('width','150px').css('opacity','0').css('filter','alpha(opacity: 0)').css('position','relative').css('top','-38px').css('left','0px');
buttonChooseImg.append(liChooseImg);
divChooseImg.append(buttonChooseImg);
divInputFile.append(divChooseImg);
divInputFile.append(inputFile);
element.append(divInputFile);
return function (scope, element, attrs, controller) {
var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;
handleFileSelect = function(evt) {
evt.stopPropagation();
evt.preventDefault();
element.removeClass('nydragover');
var file, name, reader, size, type;
reader = new FileReader();
if(evt.type == "drop"){
var files = evt.originalEvent.dataTransfer.files; // FileList object.
}else{
var files = evt.target.files;
}
var file= files[0];
name = file.name;
type = file.type;
size = file.size;
reader.readAsDataURL(file);
reader.onload = function(evt2) {
if (checkSize(size) && isTypeValid(type)) {
return scope.$apply(function() {
scope.file = evt2.target.result;
//if (angular.isString(scope.fileName)) {
return scope.fileName = name;
//}
});
}
};
return false;
};
handleDragOver = function(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.originalEvent.dataTransfer.dropEffect = 'copy';
element.addClass('nydragover');
};
handleDragLeave = function(evt){
element.removeClass('nydragover');
};
validMimeTypes = attrs.nyFileDropzone;
checkSize = function(size) {
var _ref;
if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
return true;
} else {
alert("El archivo debe pesar menos de " + attrs.maxFileSize + " MB");
return false;
}
};
isTypeValid = function(type) {
if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
return true;
} else {
alert("Tipo de archivo inválido. El archivo debe ser de alguno de los siguientes tipos: " + validMimeTypes);
return false;
}
};
element.bind('dragover', handleDragOver);
element.bind('dragleave', handleDragLeave)
element.bind('drop', handleFileSelect);
inputFile.bind('change', handleFileSelect);
}
}
};
});