效果图:
环境:
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