jQuery.form uploadProgress從來沒有叫

我想寫一個WordPress插件，使用Vimeo API上傳視頻。我正在嘗試爲用戶提供上傳進度條，可以看到它正在工作。爲了生成狀態欄，我使用了jQuery.Form插件並訪問uploadProgress回調函數，但無法調用回調函數。我使用的是Chrome 19，因此上傳和文件API應該可供瀏覽器使用。jQuery.form uploadProgress從來沒有叫

我一直在從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); 
    } 
}); 
});

來源

2012-06-27 Stewarty

我發現這個地方，它在我的網站上工作。我可以上傳視頻，並在完成百分比上傳時顯示進度條。

所有你需要的是你的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-10 11:38:38 AdRock

我與jQuery的形式同樣的問題在我的WordPress插件，它不火的上傳進度回調。

我已經使用'jquery-form'作爲句柄入隊了最新版本的jQuery Form插件，然後我發現WordPress已經包含了使用相同句柄註冊的jQuery Form插件！因此，實際上我已經入隊的新版本沒有被加載。 WordPress插件版本的問題在於它是一個不支持uploadProgress回調的舊版本。

所以解決方案是註銷WordPress版本的jQuery Form插件，然後註冊新版本。

來源

2012-10-21 23:18:04 Parham

您應該嘗試使用更新的Ajax Form版本。請繼續關注所需的jQuery版本。您可以從http://malsup.github.io/jquery.form.js

來源

2013-07-02 02:23:13

下載它，你沒有聲明「欄」對象

ü必須添加到您的代碼

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

，一切都會好起來的..

來源

2013-08-18 00:56:21 Yahia

我我一直在檢查，因爲我有同樣的問題。據我的理解，你正在引用尚未加載的元素，這就是爲什麼回調不會觸發。

在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-03 15:17:23 ole

jQuery.form uploadProgress從來沒有叫

回答

相關問題