星期六, 2018-05-26 10:44 — adminshiping1

jQuery.form uploadProgress never called

I'm trying to write a WordPress plugin that uploads a video using the Vimeo API. I am trying to provide a progress bar for the upload to the user can see that it is working. To produce the status bar I am using the jQuery.Form plugin and accessing the uploadProgress callback but I cannot get the callback to fire. I am using Chrome 19 so the upload and file API's should be available to the browser.

I have been copying the code from the jQuery.Form demo, which works on their page but has no effect on mine. - http://jquery.malsup.com/form/progress.html

The little Chrom notification in the bottom left of the screen is showing the upload percentage so I am confident that the file is being sent.

Thoughts?

    <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);
    }
}); 
});

shareimprove this question

5 Answers 正确答案

active oldest votes

up vote3down vote

I found this somewhere and it works on my site. I am able to upload videos and it shows a progress bar while uploading with a percentage done.

All you need is your php file to move your video from it's temp location to its destination.

Hope it works for you as it does for me :)

<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.css('display','block')
            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
            //这里应重新设为 初始值 在option 中的  success error 也应为初始值

            progressbar.css('display','none')

            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>

answered Aug 10 '12 at 11:38

AdRock

1,69884478

add a comment

up vote2down vote

I had the same issue with jQuery Form in my WordPress plugin, which did not fire the uploadProgress callback.

I had enqueued the latest version of jQuery Form plugin with 'jquery-form' as the handle and then I found that WordPress has already included jQuery Form plugin registered with the same handle! Therefore, actually the new version that I had enqueued was not being loaded. And the problem with the WordPress version of the plugin is that it's an old version which doesn't support uploadProgress callback.

So the solution was to deregister the WordPress version of jQuery Form plugin and then register the new version.

answered Oct 21 '12 at 23:18

Parham

1314

add a comment

up vote0down vote

You should try to use a newer Ajax Form version. Stay tuned about version of jQuery required. You can download it from http://malsup.github.io/jquery.form.js

answered Jul 2 '13 at 2:23

Lucio Fonseca

2,14821218

add a comment

up vote0down vote

you didn't declare "bar" object

u must add to your code

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

and everything will be okay ..

answered Aug 18 '13 at 0:56

Yahia

10718

add a comment

up vote0down vote

I've been checking into this, as I had the same problem. To my understanding, you are referencing to elements not yet loaded, that's why the callback doesn't fire.

Set an options array along with form submit binding outside of document.ready, set the .ajaxForm() inside.

Like this:

     $(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();
        }

      };

and then bind your form like this:

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

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

       });

answered Jun 3 '14 at 15:17

ole

122620

add a comment

普通分类:

jquery

You are here

jquery form.js options uploadProgress 上传进度有大用

jQuery.form uploadProgress never called

5 Answers 正确答案

来自 https://stackoverflow.com/questions/11224402/jquery-form-uploadprogress-never-called

友情链接

搜索表单

用户登录

You are here

jquery form.js options uploadProgress 上传进度 有大用

jQuery.form uploadProgress never called

5 Answers 正确答案

来自 https://stackoverflow.com/questions/11224402/jquery-form-uploadprogress-never-called

友情链接

jquery form.js options uploadProgress 上传进度有大用