使用角度js从服务器dropzone js显示图像

时间:2018-06-13 13:13:48

标签: angularjs

我使用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);
});
};
});

0 个答案:

没有答案