学步园

效果图：

环境：

python2.7 + boostrap2.3 +  tornado3.0 + uplodify2.2

贴点代码：

<script type="text/javascript" src="{{ static_url("uploadify/jquery.uploadify.min.js") }}"></script>
<link rel="stylesheet" href="{{ static_url("uploadify/uploadify.css") }}" type="text/css"/>
<form>
<div id="queue"></div>
<input id="file_upload" name="file" type="file" multiple="true">
</form>
</div>
<script type="text/javascript">
$(function() {
    $('#file_upload').uploadify({
        'formData' : { 'co' : '{{handler.co}}' },
        'swf' : '{{ static_url("uploadify/uploadify.swf") }}',
        'uploader' : '/file/upload/{{reimbursed.id}}',
        'buttonText' : '上传',
        'fileSizeLimit' : '2MB',
        'fileTypeDesc' : 'All Files',
        'fileTypeExts' : '*.png; *.gif; *.jpg; *.jpeg; *.docx; *.doc;*.csv;*.xls;*.txt;*.pdf;*.rar;*.zip;*.tar',
        'onUploadSuccess' : function(file, data, response) {
        	data = eval('('+data+')');
        	if(data['status'] == 'ok'){fileinfo = eval('('+data['fileinfo']+')');$('.file_list > tbody').append('<tr><td>'+fileinfo['filename']+'</td><td>'+fileinfo['size']+'</td><td>'+fileinfo['operator_name']+'</td><td>'+fileinfo['update_time']+'</td><td style="color:green;">上传成功！</td></tr>');}
        	else{alert(data['msg']);}
            },
         'onUploadError': function(file,errorCode,errorMsg,errorString){
		    if(errorMsg == 413){
		        alert('文件大小超出限制,文件'+file.name+'上传失败。');
		    }else{
		        alert('文件'+file.name+'上传失败,请重试。errorString:'+errorString);
		    }   
		} 
	});
});
 </script>

    def post(self, reim_id):
        '''
        uploadify上传文件，由于是flush无法传递cookie，导致登录校验失败&&cookie_userinfo取不到，
        官网提供的方法为$_COOKIE赋值，但是tornado这个...
        所以，将cookie作为post传过来，然后自己解析成cookie_userinfo
        '''
        if self.check_user_co() is None:
            self.write('{"status":"fail","msg":"auth check failed"}');return False
            
        dir = '../upload/'
        if not os.path.exists(dir):
            os.makedirs(dir)
        dir = dir+str(reim_id)+'/'
        if not os.path.exists(dir):
            os.makedirs(dir)
             
        if self.request.files == {} or 'Filedata' not in self.request.files:
            self.write('{"status":"fail","msg":"can\'t find upload file"}');return False
        files = self.request.files['Filedata']
        for file in files:
            content_type = file['content_type']
            if len(file['body']) > 2 * 1024 * 1024:
                self.write('{"status":"fail","msg":"file has over limit (2M)"}');return False
              
            filename = file['filename'].strip() # 去除空格
            path = dir + filename
            f = open(path, 'w')
            f.write(file['body'])
            f.close()
            
            savefile = File(***********)
            self.application.db.add(savefile)
        self.application.db.commit()
        
        self.write(tornado.escape.json_encode({"status":"ok","fileinfo":tornado.escape.json_encode({'filename':filename, 'size':self.size(len(file['body'])), 'path':path, 'update_time':savefile.update_time.strftime("%Y-%m-%d %H:%M:%S"),'operator_name':self.cookie_userinfo['chinese_name']})}))
        

踩过的几个坑：

1、uploadify上传文件，由于flush无法传递cookie，导致登录校验失败
        官网提供的方法是：http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/取出来cookie放到POST中传递过去，后台接到以后再赋值给cookie

2、页面http:/127.0.0.1/try/uploadify/被重复加载
这个bug直到uploadify3.x才解决，低版本的方法是：http://www.uploadify.com/forum/#/discussion/7329/uploadify-v3-bug-unecessary-request-when-there-is-no-button_image_url-set-/p1

this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url)

替换成：

this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);this.settings.button_image_url = this.settings.button_image_url ? SWFUpload.completeURL(this.settings.button_image_url) : this.settings.button_image_url