Показать сообщение отдельно
  #18 (permalink)  
Старый 09.08.2013, 02:18
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Shitbox2, молодец ) Ковер и гендольф (или как его там) заслуживают отдельного упоминания

у меня пока такая штука получилась http://www.screencapture.ru/file/1190575A

Что есть:
Директивы:
- ngFileSelect - вешается на <input type="file" />
- ngFileDrop - вешается на DOM элемент, кот. будет ловить файлы (как правило, это весь документ)
- ngFileOver - вешается на элемент, кот. будет реагировать (добавляться класс), когда файлы находятся над drop элементом. По умолчанию добавляется класс "ng-file-over". Другой класс можно задать в параметре атрибута ng-file-over="className"
(в этом плане ничего не менял)

Один сервис:
- $fileUploader - управление очередью и загрузка файлов

$fileUploader
свойства:
- url: общий для всех файлов. Можно индивидуализировать для каждого файла, после добавления файла в хранилище
- alias - псевдоним, под которым сервер увидит файл. Общий для всех файлов. Можно индивидуализировать для каждого файла, после добавления файла в хранилище
- autoUpload - автозагрузка (true/false)
- removeAfterUpload - удалить из очереди после загрузки (true/false)
- filters - фильтры, применяемые к файлам перед добавлением в очередь. По умолчанию присутствует simple filer : )
- queue - очередь
методы:
- bind - пожалуй, один из наиболее важных. Регистрирует коллбеки. Позволяет повесить на одно событие сколько угодно (в пределах разумного ) обработчиков.
- addToQueue - добавляет файлы в очередь загрузки
- removeFromQueue - удаляет файл из очереди по индексу
- clearQueue - очищает очередь
- uploadItem - загружает файл по индексу
- uploadAll - загружает все файлы в очереди
коллбеки:
- afteraddingfile - после добавления файла в очередь
- afteraddingall - после добавления всех файлов в очередь
- beforeupload - перед загрузкой
- progress - индикация загрузки файла
- success - успешная загрузка
- error - ошибка при загрузке
- complete - загрузка завершена

Чтобы было проще понять, приведу кусок кода:
app.controller( 'MainController', function( $scope, $fileUploader ) {
    $scope.model = {};

    // пользовательские фильтры
    $scope.filter1 = function( item ) {
        console.log( 'filter1' );
        return true;
    };

    // их может быть много, главное их добавить (push)
    $scope.filter2 = function( item ) {
        console.log( 'filter2' );
        return true;
    };

    // коллбек "после добавления файла в очередь"
    $scope.afterAddingFile = function( item ) {
        console.log( item );
    };

    // коллбек "после добавления всех файлов в очередь"
    $scope.afterAddingAll = function( items ) {
        $scope.model.items = $fileUploader.queue;
        $scope.$apply();
    };

    // коллбек "перед загрузкой"
    $scope.beforeUpload = function( item ) {
        console.log( item );
    };

    // коллбек "progress для файла"
    $scope.progress = function( progress ) {
        console.log( 'Progress: ' + progress );
        $scope.$apply();
    };

    // коллбек "success для файла"
    $scope.success = function( xhr ) {
        console.log( 'Success: ' + xhr.response );
    };

    // коллбек "complete для файла"
    $scope.complete = function( xhr ) {
        console.log( 'Complete: ' + xhr.response );
        $scope.$apply();
    };

    // управление очередью
    $scope.uploadAll = function() {
        $fileUploader.uploadAll();
    };

    // управление очередью
    $scope.removeAll = function() {
        $fileUploader.clearQueue();
    };

    $fileUploader.url = '/upload.php';

    // добавление фильтров
    $fileUploader.filters.push( $scope.filter1 );
    $fileUploader.filters.push( $scope.filter2 );

    // регистрация наблюдателей
    $fileUploader.bind( 'afteraddingfile', $scope.afterAddingFile );
    $fileUploader.bind( 'afteraddingall', $scope.afterAddingAll );
    $fileUploader.bind( 'beforeupload', $scope.beforeUpload );
    $fileUploader.bind( 'progress', $scope.progress );
    $fileUploader.bind( 'success', $scope.success );
    $fileUploader.bind( 'complete', $scope.complete );
});

т.о. на любое событие может подписаться произвольное количество раз любой контроллер (или несколько контроллеров)
код http://learn.javascript.ru/play/DUtgpc

Насчет абортов. Говорят, это плохо

Хочу сделать Progress, Success(may be) и Complete для всей очереди, после чего приступлю к генерации превьюшек. Скорее всего у меня будет для этого отдельный сервис.

Как то так
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 09.08.2013 в 02:35.
Ответить с цитированием