web.py+xheditor+ ajaxfileupload+新浪sae图片上传

新浪sae是不能像本地一样,直接把上传图片写入硬盘的,只能用新浪自己的云储存.

这里分享一下,我写的基于web.py上传代码,编辑器使用的是xheditor, 缩略图上传使用的是ajaxfileupload.js

模板部分

 

<divclass="control-group"><labelclass="control-label">缩略图:</label><divclass="controls"><inputtype="file"name="thumb_upload"id="thumb_upload"/><imgsrc="/static/img/spinner.gif"id="loading"style="display: none;"><br/><imgsrc=""id="result"/><inputtype="hidden"name="thumb"value=""id="thumb"/></div><divclass="control-group"><divclass="controls"style="margin-left:0px;"><textareaname="content"id="elm1"></textarea></div></div><scriptsrc="/static/ajaxfileupload/ajaxfileupload.js"></script><scripttype="text/javascript"src="/static/xheditor/xheditor-1.2.1.min.js"></script><scripttype="text/javascript"src="/static/xheditor/xheditor_lang/zh-cn.js"></script><script>//ajaxfileupload
    $("#thumb_upload").live("change",function(){return ajaxFileUpload();});function ajaxFileUpload(){
        $("#loading").ajaxStart(function(){
                    $(this).show();})//开始上传文件时显示一个图片.ajaxComplete(function(){
                    $(this).hide();});//文件上传完成将图片隐藏起来
        $.ajaxFileUpload
        ({
                    url:'/admin/content/thumb_upload',
                    secureuri:false,
                    fileElementId:'thumb_upload',
                    dataType:'json',
                    success:function(data, status){
                        msg = data.msg.split("_");
                        msg = msg[(msg.length -1)];
                        $(".filename").text(msg);
                        $('#result').attr("src", data.msg);
                        $('#thumb').attr("value", data.msg);},
                    error:function(data, status, e){
                        alert(e);}})returnfalse;}//xheditorvar plugins ={Code:{c:'btnCode', t:'插入代码', h:1, e:function(){var _this =this;var htmlCode ='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';var jCode = $(htmlCode), jType = $('#xheCodeType', jCode), jValue = $('#xheCodeValue', jCode), jSave = $('#xheSave', jCode);
            jSave.click(function(){
                _this.loadBookmark();
                _this.pasteHTML('<pre class="prettyprint lang-'+ jType.val()+'">'+ _this.domEncode(jValue.val())+'</pre>');
                _this.hidePanel();returnfalse;});
            _this.showDialog(jCode);}}};
    editor = $('#elm1').xheditor({
        upImgUrl:"/admin/content/upload", upImgExt:"jpg,jpeg,gif,png",
        localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,//remoteImgSaveUrl: 'demos/saveremoteimg.php',
        width:'100%', height:'244px',
        plugins: plugins,
        loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',
        html5Upload:false,
        tools:'full'});</script>

 

 

上传的调用的两个类

 

class upload:def POST(self):import cgi
        from common import upload
        cgi.maxlen =3*1024*1024# 3MBtry:
            i = web.input(filedata={})exceptValueError:return u"文件过大"

        path = upload(i.filedata)return json.dumps({"err":"","msg":"!"+path})class thumb_upload:def POST(self):import cgi
        from common import upload
        cgi.maxlen =3*1024*1024# 3MBtry:
            i = web.input(thumb_upload={})exceptValueError:return u"文件过大"

        path = upload(i.thumb_upload)return json.dumps({"err":"","msg": path})

 

 

实际上传类

 

def upload(myfile):import time
    import random
    import os

    data = time.strftime("%Y%m%d")
    ran = str(random.randint(0,9999999999))+'_'
    filepath = myfile.filename.replace('\\','/')
    filename = filepath.split('/')[-1]if'SERVER_SOFTWARE'in os.environ:#确定以下是在sae环境下import sae.storage
        from settings import domain

        new_file_name ='upload/'+ data +'/'+ ran + filename
        #写入
        s = sae.storage.Client()
        ob = sae.storage.Object(myfile.file.read())
        s.put(domain, new_file_name, ob)
        path ="http://"+ domain +"-"+ domain +".stor.sinaapp.com/"+ new_file_name
    else:from settings import upload_dir

        filedir = upload_dir +'/'+ data
        ifnot os.path.exists(filedir):
            os.mkdir(filedir)#创建文件夹

        new_file_name = filedir +'/'+ ran + filename
        #写入
        fout = open(new_file_name,'wb')
        fout.write(myfile.file.read())
        fout.close()
        path ='/static/upload/'+ data +'/'+ ran + filename

    return path

 

 

以上,大功告成.

武汉长乐未央网络科技,版权所有,转载请注明.

posted on 2013-09-06 16:37  黑客&艺术家  阅读(412)  评论(0)    收藏  举报