1 
$(function() {
    $(".preview").click(function() {
        $('#image').wrap('<form action="/index/upload.php" method="post" enctype="multipart/form-data" id="imageform" target="imageupload" />');
        $('#imageform').submit();
        $('#image').unwrap();
        var image = $('#imageupload').filename;
        return false;
    });
});

<iframe style="display: none;" name="imageupload" id="imageupload"></iframe>
<input type="file" id="image" name="image">
<input type="button" value="Preview" class="preview">

上記のコードでは、画像がサーバーに送信された後、アップロードされた画像のファイル名を含む変数を iframe に作成して取得します。私が抱えている問題は、ファイル名を取得するときに、フォームが送信されたときに jQuery の .submit() 関数にコールバックがないため、画像がアップロードされている間にコードがまだファイル名を取得しようとしないことです。これを回避する方法を知っている人はいますか？

4

1 に答える 1

1

iframe 自体に onload イベントがあることがわかったので、iframe に送信した後にこれをトリガーすることができ、ファイルがアップロードされた後もコードは必要に応じて続行されます。

$(function() {
   $(".preview").click(function() {
       $('#image').wrap('<form action="/index/upload.php" method="post" enctype="multipart/form-data" id="imageform" target="imageupload" />');
        $('#imageupload').attr('onload', 'preview()');
        $('#imageform').submit();
        $('#image').unwrap();
        return false;
   });
});
function preview() {
    var image = $('#imageupload').contents().find('#filename').html();
}


<iframe style="display: none;" onload="" name="imageupload" id="imageupload"></iframe>
<input type="file" id="image" name="image">
<input type="button" value="Preview" class="preview">
于 2012-04-05T22:22:04.943 に答える