Catalyst 应用程序中的上传进度条

Question

对于我的 Catalyst 项目（Apache2 下的 FastCGI），我想要一个上传进度条。该表单是使用 HTML::FormHandler 创建的，包含几个文本字段和一个文件上传输入（它不是纯粹的文件上传器）。

到目前为止，我尝试了 1) Catalyst::Plugin::UploadProgress and 2) jQuery Form Plugin - 但没有成功。表单提交和文件上传仍然有效，但 1) 进度条不可见，2) 进度条停留在 0%。

我尽可能地遵循文档。我错过了什么？这些解决方案是否应该开箱即用地与 Catalyst 一起使用？

尝试 1) Catalyst::Plugin::UploadProgress

<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>

Answer 1

好的，使用 jQuery 表单插件的第二个解决方案现在非常有效。浏览器控制台显示错误 ajaxForm is not a function。问题可能是 github 不想成为 CDN。在本地服务 jquery.form.js 后问题解决了。

Catalyst 应用程序中的上传进度条

Upload progress bar in Catalyst app

jquery

file-upload

catalyst