Uploadify fadeOut () Проблемы - PullRequest
Новая
       3

Uploadify fadeOut () Проблемы

2 голосов
/ 28 декабря 2011

Я разрабатываю элемент управления заполнением образа Asp.Net. Когда пользователь наводит указатель мыши на изображение, в верхней части появляется панель инструментов, которая дает пользователю возможность: загрузить другое изображение, изменить комментарии к изображению или вернуться к аватару по умолчанию.

Я установил управление загрузкой на Uploadify . Все в этом контроле великолепно, кроме одной проблемы.

Пояснение: Когда изображение впервые отображается на странице, css панели инструментов устанавливает отображение: нет. Когда пользователь наводит курсор на изображение, панель инструментов, содержащая элемент управления Uploadify, исчезает с помощью jQuery: '.fadeIn ()'. После загрузки в событии onAllComplete панель инструментов исчезает с помощью jQuery: 'fadeOut ()',

Проблема: Uploadify не выполняет загрузку после первой начальной загрузки ", когда на панели инструментов вызывается метод .fadeOut ()!

Если контейнер остается видимым, загрузка выполняется нормально. Кстати, методы .fadeIn (), .fadeOut () можно вызывать «перед» любой загрузкой, и ошибки нет. Похоже, виновником является метод "post upload" .fadeOut ().

Может кто-нибудь помочь с этим вопросом? Я могу просто встроить панель инструментов в качестве постоянного приспособления к заполнителю изображения, но она имеет гораздо более профессиональную привлекательность с эффектами затухания.

Вот некоторый код, который воссоздает проблему: 

<code>    <code>
    <html>
    <head>
    <title></title>


    <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script src="jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
    <script src="swfobject.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#file_upload').uploadify({
                'uploader': '/uploadify.swf',
                'script': '/Handler1.ashx',
                'folder': '/uploads',
                'onAllComplete': function() {
                    if (window.frozenImageEditorToolBar) {
                        $(window.frozenImageEditorToolBar).removeAttr('freeze');
                        $(window.frozenImageEditorToolBar).fadeOut();
                        window.frozenImageEditorToolBar = false;
                    }
                }
            });

            $('#container').mouseenter(function() {
                $('#toolbar').fadeIn();
            });

            $('#container').mouseleave(function() {
                if (!$('#toolbar').hasAttr('freeze'))
                    $('#toolbar').fadeOut();
            });

            $('#toolbar').mousedown(function(e) {
                $(this).attr('freeze', '1');
                window.frozenToolBar = $(this);
                //prevent container.mouseleave() from fading out the toolbar
                //until the upload is complete. (see onAllComplete)
            });

        });

        (function($) {
            $.fn.hasAttr = function(attribute) {
                var attr = this.attr(attribute);
                return (typeof attr !== 'undefined' && attr !== false);
            }
        })(jQuery);

    </script>

    </head>
</code>


    -------- HTML Body -------- (Replace ! with <)

   <pre>
    !div id="container" 
        style="height: 150px; width: 250px; background-color: #6699FF;">
        !div id="toolbar" style="background-color: #C0C0C0; display: none;">
            !input id="file_upload" type="file" />
        !/div>
    !div>
...