Question

我正在尝试编写一个使用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);
    }
}); 
});

Answer 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>

Answer 2

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

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

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

Answer 3

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

下载

Answer 4

你没有声明“bar”对象

你必须添加到你的代码

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

一切都会好的..

Answer 5

我一直在检查这个，因为我有同样的问题。根据我的理解，您正在引用尚未加载的元素，这就是回调不会触发的原因。

在document.ready之外设置一个options数组和表单提交绑定，在里面设置.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;

       });

jQuery.form uploadProgress从未调用过

5 个答案: