我使用dropzone js将图像上传到服务器,一切正常。代码可以成功上传。但是,当涉及到编辑并从服务器获取图像然后返回到dropzone区域时,我不知道如何在按下编辑按钮时将模拟文件推送到dropzone区域。也许一个想法如何集成模拟文件可能编码。谢谢你的进步。
HTML
<div class="input-container dropzonearea">
<div id="dropzone" class="dropzone" dropzone="dropzoneConfig">
<div class="dz-message">
Drop or click image file here to upload.<br>
<span><i class="icon-image2"></i></span>
</div>
</div>
</div>
js
Dropzone.autoDiscover = false;
var app = angular.module('app', ['dropzone']);
app.controller('MainController', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){
$scope.fileUpload = null;
$scope.dropzoneConfig = {
'options': {
url : '/upload.php',
acceptedFiles : 'image/jpeg, images/jpg, image/png',
addRemoveLinks : true,
parallelUploads : 5,
maxFiles: 1,
autoProcessQueue : false
},
init: function () {
},
'eventHandlers': {
'addedfile': function(file) {
$scope.fileUpload = file;
},
'sending': function (file, xhr, formData) {},
'success': function (file, response) {}
}
}
$scope.Edit = function(id){
$http.post(
"imagefromserver.php", {
'ID': id,
}
).then(function(response) {
var imageurl = response.data;
//image from server to push on the dropzone area
});
}
}]);
angular.module('dropzone', []).directive('dropzone', function () {
return function (scope, element, attrs) {
var config, dropzone;
config = scope[attrs.dropzone];
dropzone = new Dropzone(element[0], config.options);
angular.forEach(config.eventHandlers, function (handler, event) {
dropzone.on(event, handler);
});
};
});