Javascript 如何使用Angularjs中的Dropzone显示已存储在服务器上的文件
我使用此指令在页面中呈现Javascript 如何使用Angularjs中的Dropzone显示已存储在服务器上的文件,javascript,angularjs,directive,dropzone.js,emit,Javascript,Angularjs,Directive,Dropzone.js,Emit,我使用此指令在页面中呈现Dropzone.js: angular.module('dropzone', []).directive('dropzone', function () { return function (scope, element, attrs) { var config, dropzone; config = scope[attrs.dropzone]; // create a Dropzone for the element with the
Dropzone.js
:
angular.module('dropzone', []).directive('dropzone', function () {
return function (scope, element, attrs) {
var config, dropzone;
config = scope[attrs.dropzone];
// create a Dropzone for the element with the given options
dropzone = new Dropzone(element[0], config.options);
// bind the given event handlers
angular.forEach(config.eventHandlers, function (handler, event) {
dropzone.on(event, handler);
});
};
});
在我的控制器中,使用以下代码:
angular.module('app', ['dropzone']);
angular.module('app').controller('SomeCtrl', function ($scope) {
$scope.dropzoneConfig = {
'options': { // passed into the Dropzone constructor
'url': 'upload.php'
},
'eventHandlers': {
'sending': function (file, xhr, formData) {
},
'success': function (file, response) {
}
}
};
});
在Dropzone中,要显示已存储在服务器上的文件,请为此使用
mockFile
和this.emit
。现在,如何获取这个
并运行发出
函数?我解决了这个问题:
'use strict';
angular.module('dropzone', []).directive('dropzone', function ($timeout) {
return {
restrict:'AE',
require: 'ngModel',
link:function (scope, element, attrs, ngModel) {
var init = function () {
var config, dropzone;
config = scope[attrs.dropzone];
// create a Dropzone for the element with the given options
dropzone = new Dropzone(element[0], config.options);
// Display existing files on server
if(ngModel.$viewValue !=='' && ngModel.$viewValue !==undefined){
var mockFile = {name: ngModel.$viewValue, size: 1234};
dropzone.emit("addedfile", mockFile);
dropzone.createThumbnailFromUrl(mockFile, "uploads/" + ngModel.$viewValue);
dropzone.emit("complete", mockFile);
}
// Form submit rest dropzone event handler
scope.$on('dropzone.removeallfile', function() {
dropzone.removeAllFiles();
});
// bind the given event handlers
angular.forEach(config.eventHandlers, function (handler, event) {
dropzone.on(event, handler);
});
};
$timeout(init, 0);
}
}
});
在控制器中:
$scope.dropzoneConfig = {
options: { // passed into the Dropzone constructor
url: '/api/uploadimage',
paramName: "file", // The name that will be used to transfer the file
maxFilesize: .5, // MB
acceptedFiles: 'image/jpeg,image/png,image/gif',
maxFiles: 1,
},
'eventHandlers': {
'removedfile': function (file,response) {
$http({
method : "POST",
url : "/api/uploadimage/"+$scope.customer.avatar_url
}).then(function mySucces(response) {
$scope.deleteMessage = response.data;
$scope.customer.avatar_url='';
});
},
'success': function (file, response) {
$scope.customer.avatar_url = response.filename;
}
}
};
在您的Html中:
<div ng-if="customer.avatar_url!==undefined" ng-model="customer.avatar_url" dropzone="dropzoneConfig" class="dropzone"></div>