我正在使用ng-dropzone来管理我的图片文件上传。它在单个页面中的单个ng-dropzone中运行良好,但是当在单个页面中出现多个dropzone时,只有最后一个dropzone可用。另一个dropzone不起作用。目前,我从后端获取图像URL并将其解析为dropzone作为默认缩略图。
HTML
// Doesn't show the thumbnail image
<ng-dropzone ng-show="random", options="dzOptionInit" callbacks="dzCallbacks" methods="dzMethods" class="dropzone"></ng-dropzone>
// Show thumbnail image
<ng-dropzone ng-show="random2", options="dzOptionInit" callbacks="dzCallbacks" methods="dzMethods" class="dropzone"></ng-dropzone>
控制器
$scope.dzMethods = {};
$scope.dzOptionInit = {
url: '#',
paramName : 'photo',
maxFilesize : '25',
acceptedFiles : 'image/jpeg, images/jpg, image/png',
addRemoveLinks : true,
autoProcessQueue : false,
maxFiles: 1
};
$scope.dzCallbacks = {
'addedfile' : function(file){
$scope.newFile = file;
..
},
'success': function(){
..
},
'removedfile': function(){
..
},
};
Service.GetData(function(data){
$scope.calculators.featured_photo = data.featured_photo;
$scope.myDz = $scope.dzMethods.getDropzone();
var mockFile = {serverImgUrl : $scope.calculators.featured_photo};
$scope.myDz.emit("addedfile", mockFile);
$scope.myDz.emit("success", mockFile);
$scope.myDz.emit("thumbnail", mockFile,
$scope.calculators.featured_photo);
$scope.myDz.createThumbnailFromUrl(mockFile, mockFile.serverImgUrl, null, true);
$scope.myDz.files.push(mockFile);
});
我试图以非角度方式查看similar stackoverflow question。但仍然不知道。
答案 0 :(得分:-1)
我使用自定义指令。试试吧。
<div class="drop" ng-dropzone="addImage($event)">
Drop images here
</div>
// ./js/directives.js
angular
.module('myGenerator') // myGenerator replace to your name module!!
.directive('ngDropzone', ['$parse', function ($parse) {
return {
restrict: 'A',
compile: function ($element, attr) {
var fn = $parse(attr['ngDropzone']);
return function (scope, element) {
element.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
element.on('drop', function (e) {
var callback = function () {
fn(scope, {$event: e});
};
e.stopPropagation();
e.preventDefault();
scope.$apply(callback);
});
}
}
}
}]);
// ./js/controller.js
angular
.module('myGenerator')// myGenerator replace to your name module!!
.controller('DropCtrl', ['$scope', function ($scope) { // replace name controlller
// Load all images
$scope.addImage = function (e) {
// create array with files
var files = Array.prototype.slice.call(e.dataTransfer.files);
files.forEach(function(file){
alert("Added File " + file.name);
});
};
}])
你可以看到它https://codepen.io/max-ivaneychyk/pen/JJvPmY?editors=1111