2017-03-01 48 views
0

對於我的Catalyst項目(Apache2下的FastCGI),我想要一個上傳進度條。該表格使用HTML :: FormHandler創建,幷包含多個文本字段和一個文件上傳輸入(它不是純文件上傳器)。在Catalyst應用上載進度條

到目前爲止,我試過1)Catalyst::Plugin::UploadProgress和2)jQuery Form Plugin - 沒有成功。表單提交和文件上傳仍然有效,但是1)沒有進度條可見,並且2)進度條保持在0%。

我按照儘可能接近的文檔。我錯過了什麼?這些解決方案是否應與Catalyst開箱即用?

嘗試1)催化劑::插件::上傳進度

<head> 
    <link href="/static/css/progress.css" rel="stylesheet" type="text/css" /> 
</head> 

<form enctype="multipart/form-data" action="/run/start" method="post" onsubmit="return startEmbeddedProgressBar(this)"> 
    <input type="text" name="name" /> 
    <input type="date" name="date" /> 
    <input type="file" name="file" /> 
    <input type="submit" name="submit" /> 
</form> 

<div id="progress"></div> 

<script src="/static/js/progress.js" type="text/javascript"></script> 
<script src="/static/js/progress.jmpl.js" type="text/javascript"></script> 

嘗試2)的jQuery表格插件

<head> 
    <link href="/static/css/progress.css" rel="stylesheet" type="text/css" /> 
</head> 

<form enctype="multipart/form-data" action="/run/start" method="post"> 
    <input type="text" name="name" /> 
    <input type="date" name="date" /> 
    <input type="file" name="file" /> 
    <input type="submit" name="submit" /> 
</form> 

<div class="progress"> 
    <div class="bar"></div > 
    <div class="percent">0%</div > 
</div> 

<div id="status"></div> 

<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> 
(function() { 

var bar = $('.bar'); 
var percent = $('.percent'); 
var status = $('#status'); 

$('form').ajaxForm({ 
    beforeSend: function() { 
     status.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); 
    }, 
    success: function() { 
     var percentVal = '100%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    complete: function(xhr) { 
     status.html(xhr.responseText); 
    } 
}); 

})();  
</script> 

回答

0

確定與jQuery表格插件第二溶液現在工作方式類似魅力。 瀏覽器控制檯顯示錯誤ajaxForm is not a function。問題可能是github不想成爲CDN。在當地服務jquery.form.js後,問題解決了。