Question

我使用dropzone.js进行多个图片上传。当一个页面上只有一个dropzone时，它可以正常工作。但是如果我尝试在一个页面上使用多个dropzone，则只有一个dropzone正在工作，即第二个dropzone正在工作，而第一个dropzone仍处于空闲状态。我试图搜索答案，但它们只与javascript相关，不适用于 Angularjs 。以下是我附上的代码供参考。

HTML
1st Dropzone

<div id="dropzone2" name="form_16" data-ng-model="itr.form_16" class="dropzone sm"
                                 options="form16Options" methods="form16Methods"
                                 callbacks="form16Callbacks" dz-form16></div>
                            <br>
                            <div style="text-align:center;" id="startUpload" ng-show="showBtns">
                                <button class="btn btn-default" ng-click="form16Methods.processQueue();">Upload All
                                </button>
                                <button class="btn btn-blue" ng-click="form16Methods.removeAllFiles();">Remove All
                                </button>
                            </div>

2nd Dropzone

<div id="loan_certificate" name="loan_certificate" data-ng-model="itr.loan_certificate"
                                 class="dropzone sm" options="loanOptions" methods="loanMethods"
                                 callbacks="loanCallbacks" dz-loan-certificate></div>
                            <br>
<div style="text-align:center;" ng-show="showBtns">
<button class="btn btn-default" ng-click="loanMethods.processQueue();">Upload All
</button>
<button class="btn btn-blue" ng-click="loanMethods.removeAllFiles();">Remove All

控制器

angular.extend($scope, {

        first: true,
        showBtns: false,
        lastFile: null,
        dzMethods: {},
        dzOptions: {
            url: $API.POST_ITR_IMAGE,
            dictDefaultMessage: '<i class="fa fa-plus"></i> Drop image or click to choose image',
            parallelUploads: 4,
            autoProcessQueue: false,
            acceptedFiles: 'image/jpeg, images/jpg, image/png',
            addRemoveLinks: true,
            uploadMultiple: true,
            dictCancelUpload: '',
            maxFilesize: '2',
            // maxFiles: 4,
        },
        dzCallbacks: {
            'addedfile': function (file, xhr, formData) {
                $scope.showBtns = true;
                $scope.lastFile = true;
            },
            'sendingmultiple': function (file, xhr, formData) {
                formData.append("_token", csrfToken);
                formData.append("id", $scope.itr.id);
                formData.append("form_16", $scope.itr.form_16);

                console.log(file);
            },
            'successmultiple': function (file, result) {
                if (result.success) {
                    $scope.pop_gallery = {images: result.image};
                    console.log($scope.pop_gallery);
                }
            },
            'error': function (file, xhr) {
                if (file.size > 2 * 1000) {
                    alert(xhr);
                }
                console.warn('File failed to upload from dropzone 2.', file, xhr);
            },
            'completemultiple': function (file) {
                angular.forEach(file, function (value, key) {
                    $scope.dzMethods.removeFile(value);
                });
            },
            'queuecomplete': function (file) {
                $scope.showBtns = false;
                $scope.lastFile = null;
                //  $scope.dzMethods.removeAllFiles();
            }
        },

指令

.directive('ngDropzone', ['$timeout', 'dropzoneOps', function ($timeout, dropzoneOps) {
    return {
        restrict: 'AE',
        template: '<div></div>',
        replace: true,
        scope: {
            options: '=?', //http://www.dropzonejs.com/#configuration-options
            callbacks: '=?', //http://www.dropzonejs.com/#events
            methods: '=?' //http://www.dropzonejs.com/#dropzone-methods
        },
        link: function (scope, iElem, iAttr) {
            //Set options for dropzone {override from dropzone options provider}
            scope.options = scope.options || {};

            var initOps = angular.extend({}, dropzoneOps, scope.options);

            if (iAttr.hasOwnProperty('name'))
                angular.extend(initOps, {paramName: iAttr.name});
            //Instantiate dropzone with initOps
            var dropzone = new Dropzone(iElem[0], initOps);


            /*********************************************/


            //Instantiate Dropzone methods (Control actions)
            scope.methods = scope.methods || {};
            scope.methods.getDropzone = function () {
                return dropzone; //Return dropzone instance
            };

            scope.methods.getAllFiles = function () {
                return dropzone.files; //Return all files
            };

            var controlMethods = [
                'removeFile', 'removeAllFiles', 'processQueue',
                'getAcceptedFiles', 'getRejectedFiles', 'getQueuedFiles', 'getUploadingFiles',
                'disable', 'enable', 'confirm', 'createThumbnailFromUrl'
            ];

            angular.forEach(controlMethods, function (methodName) {
                scope.methods[methodName] = function () {
                    dropzone[methodName].apply(dropzone, arguments);
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                }
            });


            /*********************************************/


            //Set invents (callbacks)
            if (scope.callbacks) {
                var callbackMethods = [
                    'drop', 'dragstart', 'dragend',
                    'dragenter', 'dragover', 'dragleave', 'addedfile', 'removedfile',
                    'thumbnail', 'error', 'processing', 'uploadprogress',
                    'sending', 'success', 'complete', 'canceled', 'maxfilesreached',
                    'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple',
                    'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'
                ];
                angular.forEach(callbackMethods, function (method) {
                    var callback = (scope.callbacks[method] || angular.noop);
                    dropzone.on(method, function () {
                        callback.apply(null, arguments);
                        if (!scope.$$phase && !scope.$root.$$phase)
                            scope.$apply();
                    });
                });
            }
        }
    }
}])
.provider('dropzoneOps', function () {
    /*
     *  Add default options here
     **/
    var defOps = {
        //Add your options here
    };

    return {
        setOptions: function (newOps) {
            angular.extend(defOps, newOps);
        },
        $get: function () {
            return defOps;
        }
    }
})

Angularjs多个Dropzone用于单页上的图像上传

0 个答案: