ajaxSubmit() OnProgress 第一次不工作

Posted 2023-03-12

【中文标题】ajaxSubmit() OnProgress 第一次不工作

【英文标题】：ajaxSubmit() OnProgress not working on first time

【发布时间】：2014-06-15 00:30:21

【问题描述】：

抱歉，如果在某些方面无法理解，我会尽力而为：

我正在尝试修复我的 AJAX 小错误，其中包含使用 ajaxSubmit 上传的文件。我想显示一个进度条，但是当第一次单击提交按钮时，OnProgress 事件不起作用，尽管控制台日志显示了完成的百分比。 第一次上传后，我选择另一个文件而不刷新页面。从此时起，进度条就可以正常工作了。

什么问题导致 OnProgress 事件第一次没有启动？

html：

            <form method="post" action="<?php echo URL; ?>album/uploadImage/<?php echo $this->album->id; ?>" enctype="multipart/form-data" id="form_upload">
                <input id="imgUpload" name="file_upload" type="file" required />
                <div class="progress success radius">
                <span class="meter"></span>
                </div>
                <input type="submit" value="Bild hochladen" id="submitupload" />
            </form>

jQuery，与jQuery Form plugin 相关：（请检查函数 OnProgress 上的 cmets！）

var progressbar     = $('.meter');
var completed       = '0%';

var options =  
    target: 'body',
    beforeSubmit: beforeSubmit,
    uploadProgress: OnProgress,
    success: afterSuccess,
    resetForm: true
;

$(document).ready(function() 

    $('#form_upload').submit(function()  
        $(this).ajaxSubmit(options);    
        return false; // Verhindert das Neuladen der Seite!
    );
);

function OnProgress(event, position, total, percentComplete) 
    console.log("OnProgress called: " + percentComplete + "%");
    progressbar.width(percentComplete + "%"); 
    // This line is only working AFTER the first time. 
    // When clicking on the submit button the first time, 
    // the progressbar does not increase.


function afterSuccess() 
    console.log("AfterSuccess called.");


function beforeSubmit() 
    console.log("BeforeSubmit called.");

另外在我第一次上传图片之后，其他的 jQuery 初始化都不再起作用了。我正在使用 Foundation 5 框架并使用

对其进行初始化

<script>
    $(document).foundation();
</script>

但是在第一张图片之后，像Alert-Box closing link 这样的一些事件不再起作用了。

【参考方案1】：

2天后，我发现了问题。

var progressbar     = $('.meter');
var completed       = '0%';

两者都没有加载，这意味着它们不在

$(document).ready(function ()  ... );

括号。

所以进度条和“完成”的值是在第二次上传时初始化的，当时刷新了正文。

这也解决了上传后出现的成功提示框的问题。最后，我可以通过简单地点击它的十字来关闭警告框。