Pour mon projet Catalyst (FastCGI sous Apache2), je souhaite disposer d'une barre de progression de téléchargement. Le formulaire est créé avec HTML :: FormHandler et contient plusieurs champs de texte et une entrée de téléchargement de fichier (ce n'est pas un simple uploader de fichier).Charger la barre de progression dans l'application Catalyst
Jusqu'ici, j'ai essayé 1) Catalyst::Plugin::UploadProgress et 2) jQuery Form Plugin - sans succès. La soumission de formulaire et le téléchargement de fichier fonctionnent toujours, mais avec 1) aucune barre de progression n'est visible et avec 2) la barre de progression reste à 0%.
J'ai suivi les documents aussi près que possible. Qu'est-ce que je rate? Ces solutions devraient-elles fonctionner avec Catalyst out of the box?
Tentative 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>
Tentative 2) Formulaire jQuery Plugin
<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>