1

iframe を使用する ajax 画像アップロード機能を実装しています。SOを検索して同様の質問を見つけましたが、試してみましたが、うまくいきませんでした。私のajax画像のアップロードは次のように機能します：

  • ユーザーが [画像を追加] ボタンをクリックすると、新しいダイアログ ボックスが動的に作成されます$('#imgdialog')。$('#imgform')このダイアログ ボックスは、動的に作成されたフォームと iframeを含む単なる div です$('#upload_target')。
  • このフォームにより、ユーザーはajax uplaod を介して iframe に表示されるファイルを選択できます。

しかし、これは起こりません。私はこのチュートリアルに従っています: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

私の実装とチュートリアルの実装の主な違いは、私の実装では、フォームと iframe は、ページが読み込まれたときに最初から存在せず、ユーザーがボタンをクリックしたときにその場で作成されることです。

FireBug を使用すると、必要な POST と RESPONSE が表示されるため、PHP コードが正常に動作していることはわかっています。しかし、Iframe は読み込まれませんが、FireBug では、空であることを除いて、HTML に存在することがわかります。

動的フォームと iframe を作成するコードは次のとおりです。

    imgform = document.createElement('form');
    imgform.id = 'imgform';
    imgform.method='post';
    imgform.enctype='multipart/form-data';
    imgform.action ='upload_1.php';
    imgform.target = 'upload_target';
    imgform.onsubmit='showUploadedItem();';
    $('#imgform').append("Select image:<br /><input type='file' id='imgfile' />");
    $('#imgdialog').append("<iframe id='upload_target' name='upload_target' style='border:1px solid gray;' src='#'></iframe>");

    $('#upload_target').bind('load', function() { // doesn't work with .live either
         $(this).contents().find("body").html('greetings from the iframe !');
         alert("loaded");
    });

のonSubmit$('#imgform')関数には、次の行も含めます。

    if($('#upload_target').length > 0){ alert("it's there"); } else {alert ("not there"); }

そして、私は「そこにいない」を得ました。

どうすれば iframe にアクセスできますか?

4

2 に答える 2

0

問題は、iframe が存在する前に応答ターゲットを設定することである可能性はありますか? 私は間違いなく、これらの種類のイベントのリスナーを iframe にバインドしました (動的に作成されたものもあると思います)。ただし、いくつかの厄介な点があります。必要な読み込みイベントの種類によっては、jQuery に非常に小さなプラグインが必要になる場合があります。

また、動的に作成されている #imgdialog div はどこにありますか? ここのコードにはありません。おそらく、代わりに imgdialog の ID を指定するつもりでした。

于 2012-11-17T10:14:53.950 に答える
0 
$(document.body).on('DOMNodeInserted', 'iframe', function(e) {
    console.log('inserted', e);
});

var frame = document.createElement('iframe');
$(document.body).append(frame);

または関数を定義して iframe コンテンツから直接呼び出す

于 2012-11-17T10:35:13.433 に答える