2013-03-09 4 views
3

Я пытаюсь использовать fineUploader, но у меня проблема. Проблема в том, что я не так хорошо разбираюсь в jQuery, поэтому извиняюсь, если это глупые вопросы.FineUploader Fade Каждая строка

Ниже приведен мой код. Я хочу fadeOut каждую строку, которая успешно загружена в fineUploader, так что в конце загрузки все, что появится, это оригинальная кнопка загрузки или неудачные загрузки. Он просто выглядит очень липким, если вы загружаете 1000 файлов, есть 1000 строк зеленых ящиков для каждого загруженного изображения. Мне нравится, как работает Uploadify, тогда как каждая строка медленно исчезает, как только она загружается таким образом в конце, нет строк загруженных изображений. Может ли кто-нибудь предложить решение для меня? Благодаря!

This is the container which jQuery loads each success or failed row into... 
<ul id="basicUploadFailureExample" class="unstyled"></ul> 

$(document).ready(function() { 
var errorHandler = function(event, id, fileName, reason) { 
    qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason); 
}; 

var uploader3 = new qq.FineUploader({ 
    element: $('#basicUploadFailureExample')[0], 
    callbacks: { 
     onError: errorHandler, 
     onComplete: function(id, fileName, responseJSON) { 
      if (responseJSON.success == true) { 
          // I would think the fade out would go here but I am just not sure... 
      } 
     } 
    }, 
    request: { 
     endpoint: "../server/php/example.php", 
     params: {"generateError": true} 
    }, 
    failedUploadTextDisplay: { 
     mode: 'custom', 
     maxChars: 5 
    } 
}); 

});

ответ

4

Это довольно легко сделать, на самом деле, и у вас есть правильная идея, вам просто не хватает критической функции API.

Ваш код должен выглядеть следующим образом (необходимо добавить/изменить только одну строку):

var uploader3 = new qq.FineUploader({ 
    element: $('#basicUploadFailureExample')[0], 
    callbacks: { 
     onError: errorHandler, 
     onComplete: function(id, fileName, responseJSON) { 
      if (responseJSON.success == true) { 
       $(this.getItemByFileId(id)).hide('slow'); 
      } 
     } 
    }, 
    request: { 
     endpoint: "../server/php/example.php", 
     params: {"generateError": true} 
    }, 
    failedUploadTextDisplay: { 
     mode: 'custom', 
     maxChars: 5 
    } 
}); 

Один я добавил в свой onComplete обработчиком строка вызывает функцию getItemByFileId, которая возвращает элемент, который содержит данные файла, отображаемые в пользовательском интерфейсе. Просто скройте его или выполните некоторые другие анимации, которые в конечном итоге скрывают его.

BTW, я думаю, что это крутая идея (исчезновение всех, кроме неудачных загрузок).

+0

Спасибо за помощь! – LargeTuna

+2

Для версии jQuery используйте '$ ($ (this) .fineUploader ('getItemByFileId', id)). Hide ('slow');' - Я предлагаю добавить это к ответу, я боролся некоторое время, пока не смог выяснить это. – Iravanchi

+0

@Iravanchi Ваш комментарий сделал именно это. См. [Случай # 824] (https://github.com/Widen/fine-uploader/issues/824) в проекте Github для запланированного изменения, что упростит это при использовании подключаемого модуля jQuery. –

Смежные вопросы