LinuxSir.cn,穿越时空的Linuxsir!

 找回密码
 注册
搜索
热搜: shell linux mysql
查看: 1787|回复: 1

Pylons中使用上传进度条

[复制链接]
发表于 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 = eggaste#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" /> &nbsp;
        </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]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
发表于 2010-6-21 19:13:25 | 显示全部楼层
支持,版主从PHP转Python了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表