从未调用过 jQuery.form uploadProgress答案

【问题标题】：jQuery.form uploadProgress never called从未调用过 jQuery.form uploadProgress
【发布时间】：2012-06-28 18:40:58
【问题描述】：

我正在尝试编写一个使用 Vimeo API 上传视频的 WordPress 插件。我正在尝试为上传提供一个进度条，让用户可以看到它正在工作。为了生成状态栏，我正在使用 jQuery.Form 插件并访问 uploadProgress 回调，但我无法触发回调。我使用的是 Chrome 19，因此上传和文件 API 应该可供浏览器使用。

我一直在复制 jQuery.Form 演示中的代码，该演示适用于他们的页面，但对我的页面没有影响。 - http://jquery.malsup.com/form/progress.html

屏幕左下方的小 Chrom 通知显示上传百分比，因此我确信文件正在发送。

想法？

    <form method="POST" action="<?php echo $endpoint; ?>" id="vimeo_upload_form" enctype="multipart/form-data">
        <p>
            <label>Upload video to Vimeo</label>
            <input type="hidden" name="ticket_id" value="<?php echo $token; ?>" id="ticket_id"/>
            <input type="hidden" name="chunk_id" value="0" id="chunk_id"/>
            <input type="file" name="file_data" id="file_data"/>
        </p>
        <p>
            <input type="submit" name="" value="upload">
        </p>
    </form>

jQuery(document).ready(function($) {

status_msg = $("#status_msg")
console.log(status_msg)
percent = $("#percentage")
bar = $("#bar")

$('#vimeo_upload_form').ajaxForm({
    beforeSend: function() {

        status_msg.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status_msg.html(xhr.responseText);
    }
}); 
});

【问题讨论】：

标签： javascript jquery forms wordpress upload

【解决方案1】：

我在某个地方找到了这个，它可以在我的网站上运行。我可以上传视频，它会在上传完成百分比的同时显示进度条。

您只需要 php 文件即可将视频从临时位置移动到目标位置。

希望它对你有用，对我也有用:)

<html> 
<head>
<style type="text/css"?
#progressbox {
border: 1px solid #ccc;
padding: 1px;
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:40px;
border-radius: 3px;
background-color: #20bbfb;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    //elements
    var progressbox     = $('#progressbox');
    var progressbar     = $('#progressbar');
    var statustxt   = $('#statustxt');
    var submitbutton    = $("#SubmitButton");
    var myform  = $("#UploadForm");
    var output  = $("#output");
    var completed   = '0%';

    $(myform).ajaxForm({
        beforeSend: function() { //brfore sending form
            submitbutton.attr('disabled', ''); // disable upload button
            statustxt.empty();
            progressbox.slideDown(); //show progressbar
            progressbar.width(completed); //initial value 0% of progressbar
            statustxt.html(completed); //set status text
            statustxt.css('color','#000'); //initial color of status text
        },
        uploadProgress: function(event, position, total, percentComplete) { //on progress
            progressbar.width(percentComplete + '%') //update progressbar percent complete
            statustxt.html(percentComplete + '%'); //update status text
            if(percentComplete>50) {
                statustxt.css('color','#fff'); //change status text to white after 50%
            }
        },
        complete: function(response) { // on complete
            output.html(response.responseText); //update element with received data
            myform.resetForm();  // reset form
            submitbutton.removeAttr('disabled'); //enable submit button
            progressbox.slideUp(); // hide progressbar
        }
    });
});
</script>
</head>
..
..
<form id="UploadForm" action="process.php">..</form>
<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div>
<div id="output"></div>

【讨论】：

【解决方案2】：

我的 WordPress 插件中的 jQuery Form 也有同样的问题，它没有触发 uploadProgress 回调。

我已经将最新版本的 jQuery Form 插件加入队列，使用 'jquery-form' 作为句柄，然后我发现 WordPress 已经包含使用相同句柄注册的 jQuery Form 插件！因此，实际上我排队的新版本并没有被加载。而WordPress版本插件的问题是它是一个旧版本，不支持uploadProgress回调。

所以解决方法是注销jQuery Form插件的WordPress版本，然后注册新版本。

【讨论】：

【解决方案3】：

您应该尝试使用更新的 Ajax 表单版本。请继续关注所需的 jQuery 版本。可以从http://malsup.github.io/jquery.form.js下载

【讨论】：

【解决方案4】：

你没有声明“bar”对象

你必须添加到你的代码中

<div id='bar'></div>

一切都会好起来的..

【讨论】：

【解决方案5】：

我一直在检查这个，因为我遇到了同样的问题。据我了解，您指的是尚未加载的元素，这就是回调不会触发的原因。

在 document.ready 之外设置一个选项数组以及表单提交绑定，在里面设置 .ajaxForm()。

像这样：

     $(document).ready(function() { 

     $('#form_ajax').ajaxForm();

     });


     var options = {

         beforeSubmit: function(arr, $form, options) {


            $('#sending_mail').show();

        },

         success: function() {

            $('#sending_mail').hide();
            $('#form_ajax').clearForm();
            $('#form_ajax').resetForm();
        }

      };

然后像这样绑定你的表单：

       $('#form_ajax').submit(function() {

          $(this).ajaxSubmit(options);
          return false;

       });

【讨论】：