0

jquery uiダイアログ内でpluploadウィジェットをロードするという同じ問題について、同様のスレッドをすべて読みましたが、IE9では動作しませんでした(FFとSafariはどちらも正常に動作します)。

問題は、IE9 では html5 ファイル処理がサポートされていないため、plupload の Silverlight バージョンがロードされることです。どういうわけか、[ファイルの追加] ボタンは押せませんが、[アップロードの開始] ボタンは押せます。私がこれまでに読んだことから、これは、UI ダイアログを開く前に非表示になっていることが原因です。何人かの人々は、アップローダ ウィジェットで更新する呼び出しを使用することを提案しましたが、違いはありません。

関連する Javascript コードは次のようになります: $("#upload-widget-container").dialog({ autoOpen: false, show: "blind", hide: "fold", modal: false, width: 660, height: 400 、サイズ変更可能: false });

$("#upload-widget").pluploadQueue({
        runtimes : 'html5,silverlight,flash,browserplus',
        container: 'upload-widget-container',
        url : 'upload.php',
        max_file_size : '100mb',
        chunk_size : '1mb',
        unique_names : true,
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"},
            {title : "Bin files", extensions : "bin"}
        ],
        flash_swf_url : '/js/plupload/plupload.flash.swf',
        silverlight_xap_url : '/js/plupload/plupload.silverlight.xap'
    });

    $('.upload-button').live('click', function(e)
        {
            $('#upload-widget-container').dialog("open");
            var uploader = $('#upload-widget').pluploadQueue();

            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    // Done uploading
                    for (var i=0; i < uploader.files.length; i++)
                    {
                        if (uploader.files[i].status == plupload.DONE)
                        {
                            alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                        }
                    }
                }
            });
        }
    );

マークアップは次のようになります。

<div id="upload-widget-container">
    <div id="upload-widget"></div>
</div>

<a class="upload-button green-button-148" href="#" rel="1234">Upload</a>

IE9/Silverlight でこれを機能させる方法についてのアイデアはありますか? 上記のコードに示されているように、plupload オブジェクトを更新し、.plupload div の z-index を設定しても違いはありませんでした。

更新: FF と Safari で plupload の Silverlight ランタイムを使用すると正常に動作するため、実際には IE9 の問題のように見えます。つまり、plupload、jquery ui ダイアログ、silverlight、IE9 の組み合わせです。

更新 2:そこで、他のマークアップ、css、または js を使用しないプレーンなバニラ テスト ページを作成しました。これにより、他のスクリプト、マークアップ、またはスタイリングがこの動作に干渉する可能性がなくなりました。ただし、IE 9 (バージョン: 9.0.8112.16421) ではまだ機能しません。

ただし、jQuery UI テーマの CSS を含む行を削除すると機能し、[ファイルを追加] ボタンをクリックできるようになります。 この新しい情報で何か新しいアイデアはありますか? UIテーマCSSの表示プロパティなどに関係していると思います。

4

4 に答える 4

1

何か教えてください。ボタンには「plupload_disabled」スタイルが設定されているだけですか、それとも実際にはクリックイベントが添付されていませんか？ダイアログをロードしてから、chromeまたはfirebugのコンソールで次のような操作を実行しましたか？

$('a[id*="browse"]').attr('class','').addClass('plupload_button plupload_start ui-button ui-    widget ui-state-default ui-corner-all ui-button-text-icon-primary');

jquery pluploadqueueバージョンのhtml4バージョンを使用していますが、コンソールでそれを実行してボタンを有効に戻し、ファイルを追加してみてください。上記のクラス名を使用しているクラス名と一致させてください。

アップデート

これを試して：

$('.upload-button').live('click', function(e)
{
    $('#upload-widget-container').dialog("open");
    initUploader($('#upload-widget'));
    var uploader = $('#upload-widget').pluploadQueue();

    uploader.bind('StateChanged', function() {
        if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
            // Done uploading
            for (var i=0; i < uploader.files.length; i++)
            {
                if (uploader.files[i].status == plupload.DONE)
                {
                    alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                }
            }
        }
    });
    $('<div>').delay(1000).queue(function()
    {
        $('div.plupload_buttons').find('a').each(function()
        {
            if($(this).hasClass('plupload_disabled'))
            {
                $(this).attr('class','').addClass('plupload_button plupload_start');

            }
        });
        $(this).dequeue();
    });
    }
 );
于 2012-08-09T11:41:14.563 に答える
1

そのため、jQuery UI CSS をいじってようやく見つけました。.ui-dialog クラスのオーバーフロー プロパティを非表示から表示に変更したところ、うまくいくようです。

次の行を変更しました: / .ui-dialog { position: absolute; パディング: .2em; 幅: 300px; オーバーフロー: 非表示; } /

これに: .ui-dialog { 位置: 絶対; パディング: .2em; 幅: 300px; オーバーフロー: *太字* 可視; }

率直に言って、ダイアログのオーバーフロー プロパティが原因で IE でこれが発生する理由はわかりませんが、少なくとも機能させるために、今のところこのハックを使用します。私の人生をさらに数時間奪ってくれた IE に感謝します。特に、私を助けてくれた皆さんに感謝します。称賛を贈ります。:)

于 2012-08-10T21:43:15.527 に答える
1

UI が表示されるまで、アップローダの初期化を遅らせてみてください。

これは、init コードを別の関数に入れることで実行できます (ダイアログ ボックスを閉じるときにアップローダーを破棄するか、既に初期化されているアップローダーを追跡することを忘れないでください)。

var initUploader = function(uploadWidget)
        {
            $(uploadWidget).pluploadQueue({
            runtimes : 'html5,silverlight,flash,browserplus',
            container: 'upload-widget-container',
            url : 'upload.php',
            max_file_size : '100mb',
            chunk_size : '1mb',
            unique_names : true,
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"},
                {title : "Bin files", extensions : "bin"}
            ],
            flash_swf_url : '/js/plupload/plupload.flash.swf',
            silverlight_xap_url : '/js/plupload/plupload.silverlight.xap'
            });
        }

$('.upload-button').live('click', function(e)
    {
        $('#upload-widget-container').dialog("open");
        initUploader($('#upload-widget'));
        var uploader = $('#upload-widget').pluploadQueue();

        uploader.bind('StateChanged', function() {
            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                // Done uploading
                for (var i=0; i < uploader.files.length; i++)
                {
                    if (uploader.files[i].status == plupload.DONE)
                    {
                        alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                    }
                }
            }
        });
    }
);

これが役立つことを願っています

于 2012-08-09T12:30:36.963 に答える