在Catalyst应用上载进度条
问题描述:
对于我的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>
答
确定与jQuery表格插件第二溶液现在工作方式类似魅力。 浏览器控制台显示错误ajaxForm is not a function
。问题可能是github不想成为CDN。在当地服务jquery.form.js
后,问题解决了。