Question

很抱歉，如果在某些方面无法理解，我会尽我所能：

我正在尝试修复我的小AJAX错误，其中包含带有ajaxSubmit的文件上传。我想显示一个进度条，但是当第一次单击提交按钮时，OnProgress事件不起作用，尽管consolelog显示完成的百分比。首次上传后，我选择了另一个文件而不刷新页面。从这时起，进度条就完美无缺。

什么问题导致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函数的注释！）

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 Framework并用

初始化它

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

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

Answer 1

2天后，我发现了问题。

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

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

中

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

支架。

因此，当正文刷新时，第二次上传时会初始化进度条和“已完成”的值。

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

ajaxSubmit（）OnProgress第一次没有工作

1 个答案: