Angular fileupload dropzone不起作用

时间:2015-05-09 19:17:56

标签: javascript angularjs file-upload

我有以下控制器:。

    app.controller('DashboardController', ['$http', '$scope','$sessionStorage','$log','Session','api','FileUploader',  function ($http, $scope, $sessionStorage,$log, Session, api,FileUploader) {

    $scope.post = {user_id: $sessionStorage.user.user.id};


    var uploader = $scope.uploader = new FileUploader({
        url: 'js/controllers/upload.php'
    });

    // FILTERS

    uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
            return this.queue.length < 10;
        }
    });

    // CALLBACKS

    uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
    };
    uploader.onAfterAddingFile = function(fileItem) {
        console.info('onAfterAddingFile', fileItem);
    };
    uploader.onAfterAddingAll = function(addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
    };
    uploader.onBeforeUploadItem = function(item) {
        item.file.test = "gg";
        console.info('onBeforeUploadItem', item);
    };
    uploader.onProgressItem = function(fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
    };
    uploader.onProgressAll = function(progress) {
        console.info('onProgressAll', progress);
    };
    uploader.onSuccessItem = function(fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
    };
    uploader.onErrorItem = function(fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
    };
    uploader.onCancelItem = function(fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
    };
    uploader.onCompleteItem = function(fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
    };
    uploader.onCompleteAll = function() {
        console.info('onCompleteAll');
    };

    console.info('uploader', uploader);
}]);

使用以下html:

<div class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b" nv-file-over="" over-class="b-info" uploader="uploader">
                               Base drop zone

我的目标是在Base drop zone

上删除项目后立即上传

然而,无论何时我尝试将某物品拉入其中,都不会使用该物品。谁能看到我做错了什么?

1 个答案:

答案 0 :(得分:3)

只需在您的div上添加nv-file-drop=""

<div class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b" nv-file-drop="" nv-file-over="" over-class="b-info" uploader="uploader">Base drop zone</div>

尝试删除文件,并检查浏览器的控制台是否有被调用的事件 然后,您可以在uploader.uploadAll()事件上调用onAfterAddingFile,例如。