表单提交后,从iframe获取变量?

时间:2012-04-05 07:45:56

标签: jquery forms iframe submit

$(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()函数在表单提交时没有任何回调,因此在图像上传时,我的代码尝试获取文件名时尚不存在。有谁知道我可以解决这个问题?

1 个答案:

答案 0 :(得分: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">