Pylons中使用上传进度条

nbxmedia · 发表于 2010-6-21 15:17:47

操作有点麻烦，建议对JS有基础的人使用，这点上确实PHP+apc简单些。

步骤1：下载gp.fileupload
http://pypi.python.org/pypi/gp.fileupload

也可以用easy_install gp.fileupload

步骤2：配置pylons
将app:main改成项目名，不然会冲突
max_size单位是MB
[PHP]
#
# cadp - Pylons development environment configuration
#
# The %(here)s variable will be replaced with the parent directory of this file
#
[DEFAULT]
debug = true
# Uncomment and replace with the address which should receive any error reports

[pipeline:main]
pipeline = fileupload cadp

[server:main]
use = egg

aste#http
host = 0.0.0.0
port = 5000
use_threadpool = true
threadpool_workers = 10

[filter:fileupload]
use = egg:gp.fileupload
tempdir = %(here)s/data/fileupload
max_size = 205

[app:cadp]
use = egg:cadp
full_stack = true
static_files = true
lang = en

cache_dir = %(here)s/data
beaker.session.key = cadp
beaker.session.secret = somesecret
[/PHP]
配置好后重启

步骤3：HTML用法
系统变量不解释，需要jquery

[HTML]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>
<form id="adupload" enctype="multipart/form-data" method="post" action="/ad/upload" >
<table cellpadding="0" cellspacing="0" border="0" class="normalTable">
<tr>
      <th width="154">Advertise Name:</th>
      <td width="590"><input name="subject" class="input1" id="subject" onchange="$('#subject2').val($(this).val())" value="${c.ad_name}" maxlength="100"/>
      <span id="subjecterr"></span></td>
</tr>
<tr>
      <th>File:</th>
      <td>
         <input name="adpath" type="file" class="input1" id="adpath" />  
      </td>
</tr>
<tr>
      <td colspan="2">
         Max file size is 200MB. Supported Formats: .wmv .mkv .rm  .mov .mpg .mpeg .vod .mp4  .avi .flv</td>
</tr>
<tr>
      <td colspan="2">

      </td>
</tr>
<tr>
      <td colspan="2">
         <input name="uploadFile" id="uploadFile" type="submit" class="btn nextBtn" value="Next"  />
         <input type="button" value="Back" class="btn backBtn" onclick="javascript:window.history.back();" />
      </td>
</tr>
</table>
</form>
<script language="javascript">
var retries=0;
var uploadable=0;
var id_rand = Math.random()*10000000000000000000;
function UploadStat()
{
if(retries>5)return '';
$.getJSON('./gp.fileupload.stat/'+id_rand+'?q='+Math.random()*10000000000000000000,function(response){
if (response.state == -1) {
$("#progressbar").progressbar('value', 0);
$('.ui-progressbar-value').html('File is too large.');
return '';
}
if (response.state == 0) {
if(retries>5)
{
$("#progressbar").progressbar('value', 0);
$('.ui-progressbar-value').html('Upload Timedout.');
return '';
}
else
{
$("#progressbar").progressbar('value', 0);
$('.ui-progressbar-value').html('Wait...');
retries++;
}

}
if (response.percent >= 0 && response.percent < 100) {
$("#progressbar").progressbar('value', response.percent);
$('.ui-progressbar-value').html(response.percent+'%');
}
if (response.percent == 100) {
$("#progressbar").progressbar('value', response.percent);
$('.ui-progressbar-value').html(response.percent+'% Upload complete,Capturing preview images...');
return '';
}

setTimeout("UploadStat()",1500);
});

}

$('#adupload').ajaxForm({
url: $('#adupload').attr('action')+'?gp.fileupload.id='+id_rand,
beforeSubmit: function(a,f,o) {
      if(uploadable==0)return false;
      //$('#adupload').attr('action', $(this).attr('action')+'?gp.fileupload.id=${c.rand}');
      $('body').attr("onbeforeunload","return 'The file is still uploading,Do you really want to leave?';");
      $('#adupload input[type="submit"]').attr('disabled','1');

      if($('#adpath').val()=='')return false;
      o.dataType = 'json';
      $('#adupload').hide();
      //alert(1);
      filename = $('#adpath').val();
      filenames = '';
      if (filename) {
         if (filename.match('/'))
            filename = filename.split('/').pop();
         if (filename.match('\\\\'))
            filename = filename.split('\\').pop();
         if (filenames != '') {
            filenames += ' - '+filename;
         } else {
            filenames = filename;
         }
      }
      //alert(2);
      html = '<div class="fuWrapper">' +
         '<div class="fuFilename">Uploading: '+filenames+'</div>' +
         '<div style="" id="progressbar">' +
         '</div><div class="ui-widget" id="dwarn" style="width:50%"><div style="padding: 0pt 0.7em; margin-top: 2px;" class="ui-state-highlight ui-corner-all"><p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span><strong>

lease DO NOT close or refresh this page.</strong></p></div></div></div>';
      $('#adupload').after(html);
      $("#progressbar").progressbar();
      UploadStat();
      //alert(3);
},
success: function(data) {
      //id_rand = Math.random()*100000000000000000;
      if(data.error==''){
         alert('Data was Uploaded.');
      }
      else{
         alert(data.error);
         location.reload();
      }
}
});
</script>

</body>
</html>
[/HTML]

jame298 · 发表于 2010-6-21 19:13:25

支持,版主从PHP转Python了

		自动登录	找回密码
密码			注册

Pylons中使用上传进度条

本帖子中包含更多资源