jQuery.form uploadProgress 从未调用过

jQuery.form uploadProgress never called

本文关键字：调用 form uploadProgress jQuery      更新时间：2023-09-26

我正在尝试编写一个使用Vimeo API上传视频的WordPress插件。 我正在尝试为上传提供进度条，可以看到它正在工作。 为了生成状态栏，我正在使用jQuery.Form插件并访问upload进度回调，但我无法触发回调。我使用的是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);
    }
}); 
});

我在某处找到了这个，它在我的网站上有效。 我可以上传视频，并在上传时显示进度条，并完成百分比。

您所需要的只是您的 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>

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

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

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

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

你没有声明"bar"对象

你必须添加到你的代码中

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

一切都会好起来的..

我一直

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

在

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;
       });
相关文章：