使用 jquery 提交时为表单设置动画

Question

我不知道如何解释，但我会尽力而为... 我正在尝试正常提交表单，但请求结果将显示在 iframe 中。一切顺利到这里。我想要做的（如果可能的话）是动画形式将消息放入其中（如“发送......”）直到 iframe 加载响应。我现在很困惑，但是看看我的文件：

index.php

我省略了标题，因为它太明显了。

<form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe" id="form-upload">
    Choose your file here:
    <input name="uploaded_file" type="file"/>
    <input id="send-button" type="submit" value="Subir imagen"/>
</form>


<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0"></iframe>

<script type="text/javascript">
    $(document).ready(function(){
        $('#send-button').sendImage({formid: "form-upload"});
    });
</script>

上传.php

仅用于测试 porpuses。

<?php
if( isset($_FILES['uploaded_file']) )
    echo "image sent";

动画.js

这就是我要处理的地方。因为当我访问index.php 时，消息sending... 总是显示表单元素的实例。

var conf;

jQuery.fn.sendImage = function(args) {
    conf = $.extend( {
    }, args);


    this.on('click', function(e){
        e.preventDefault();
        $('#'+conf.formid).submit();
        $('#'+conf.formid).html('sending...');
    });

}

Answer 1

一旦提交表单，当前页面上的所有处理都会停止。您所做的任何事情都必须在您实际提交表格之前进行。您的替代方法是通过 AJAX 提交。