0

画像のアップロードにはuploadifyを使用し、Rails アプリケーションのライトボックスに画像を表示するにはprettyPhotoを使用しています。別々に使用すると、どちらもうまく機能します。ここで、dropbox が使用するのと同じように、lightbox に uploadify コントロールを表示したいのですが、 prettyPhotoで使用すると叫び始めます。

以下は、uploadify と prettyPhoto を使用したサンプル html です。

<!DOCTYPE html>
<html>
<head>
    <title>My Uploadify Implementation</title>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <link rel="stylesheet" type="text/css" href="prettyPhoto.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
    <script src="jquery.prettyPhoto.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php'
            // Your options here
        });

        $('#closeme').live('click', function() {
            $.prettyPhoto.close();
            return false;
        });

        $("a[rel^='prettyPhoto']").prettyPhoto();

    });
    </script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
    <div id="inline-1" style="display:none;">
        <p>This is inline content opened in prettyPhoto.</p>
        <input type="file" name="file_upload" id="file_upload" />
    </div>
</body>
</html>

ここにポップアップへのリンクが表示されます。リンクをクリックすると、ライトボックスにアップロード コントロールが表示されます。次に、サーバーにアップロードするディスクから画像を選択します。画像を選択した後、2 つの問題に直面します。

1) Error: uncaught exception: Call to StartUpload failedFF と Crome で JavaScript エラーが発生する

2) 選択した画像が、ライトボックスのアップロード コントロールにリストされません。子犬を閉じてポップアップリンクをもう一度クリックすると、ファイルのリストが表示されます。

行を削除すると、Uploadify は正常に動作します$("a[rel^='prettyPhoto']").prettyPhoto();。

どうすれば修正できるか考えていますか？

また、そのようなドロップボックス スタイルのアップローダを実現する他のプラグインを提案していただければ幸いです。

ありがとう、アミット・パテル

4

1 に答える 1

0

ページの読み込み時ではなく、ライトボックスを開いた後に、uploadify を初期化する必要があります。これは、要素が非表示になっていると Flash が読み込まれないためです。

prettyPhoto API を調べたところ、ライトボックスが開いた後に呼び出されるイベントが見つかりませんでしたが、それが必要なことです。

于 2012-05-25T16:51:27.300 に答える