2

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

5 に答える 5

3

私はこれをどこかで見つけ、私のサイトで動作します。動画をアップロードでき、アップロード中に進行状況バーがパーセンテージで表示されます。

必要なのは、ビデオを一時的な場所から移動先に移動するための 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>
于 2012-08-10T11:38:38.283 に答える
2

WordPressプラグインのjQueryフォームでも同じ問題が発生しましたが、uploadProgressコールバックが起動しませんでした。

ハンドルとして「jquery-form」を使用して最新バージョンのjQueryFormプラグインをキューに入れましたが、WordPressには同じハンドルで登録されたjQueryFormプラグインがすでに含まれていることがわかりました。したがって、実際には、私がキューに入れていた新しいバージョンがロードされていませんでした。また、WordPressバージョンのプラグインの問題は、uploadProgressコールバックをサポートしていない古いバージョンであるということです。

したがって、解決策は、WordPressバージョンのjQuery Formプラグインの登録を解除してから、新しいバージョンを登録することでした。

于 2012-10-21T23:18:04.957 に答える
0

同じ症状だったので調べてみました。私の理解では、まだロードされていない要素を参照しているため、コールバックが発生しません。

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;

       });
于 2014-06-03T15:17:23.013 に答える
0

新しいバージョンの Ajax Form を使用してみてください。必要な jQuery のバージョンについては、しばらくお待ちください。http://malsup.github.io/jquery.form.jsからダウンロードできます。

于 2013-07-02T02:23:13.647 に答える
0

「バー」オブジェクトを宣言していません

コードに追加する必要があります

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

そして、すべてがうまくいく..

于 2013-08-18T00:56:21.047 に答える