2012年1月 – Perchouli 的 Blog

分享一下在Django中使用uploadify——一个jQuery批量上传插件——的方法。github上的django-uploadify使用的是2.1.4版本，上传button只能使用图片，不能很方便的修改样式。本文针对的是uploadify 3.0.0版本。 uploadify可以结合Django自身的ImageField，或是配合easy_thumbnails等第三方app来使用。比较稳定，我在几个项目中处理批量上传都是用它，没有出现什么问题。但因为是用flash上传，在开发工具中监控不到network的动作，只能通过函数返回的错误信息来调试，所以比较麻烦，但调通一次就一劳永逸了。不重要的CSS样式，可以跳过。

.uploadifyButton{background-color:#505050;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#FFF;font:12px Arial, Helvetica, sans-serif;text-align:center;width:100%;padding:8px 0}
.uploadify:hover .uploadifyButton{background-color:gray}
.uploadifyQueueItem{background-color:#F5F5F5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:11px Verdana, Geneva, sans-serif;margin-top:5px;max-width:350px;padding:10px}
.uploadifyError{background-color:#FDE5DD!important}
.uploadifyQueueItem .cancel{float:right}
.uploadifyQueue .completed{background-color:#E5E5E5}
.uploadifyProgress{background-color:#E5E5E5;margin-top:10px;width:100%}
.uploadifyProgressBar{background-color:#09F;height:3px;width:1px}

.uploadifyButton{background-color:#505050;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#FFF;font:12px Arial, Helvetica, sans-serif;text-align:center;width:100%;padding:8px 0}

.uploadify:hover .uploadifyButton{background-color:gray}

.uploadifyQueueItem{background-color:#F5F5F5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:11px Verdana, Geneva, sans-serif;margin-top:5px;max-width:350px;padding:10px}

.uploadifyError{background-color:#FDE5DD!important}

.uploadifyQueueItem .cancel{float:right}

.uploadifyQueue .completed{background-color:#E5E5E5}

.uploadifyProgress{background-color:#E5E5E5;margin-top:10px;width:100%}

.uploadifyProgressBar{background-color:#09F;height:3px;width:1px}

添加一个上传按钮，引入相应的js文件。uploadify 3.0中把swfobject.js和uploadify.js写到一个js文件里了。

<input type="file" id="id_upload" name="upload"/>
<script type="text/javascript" src="/static/js/jquery.js"/>
<script type="text/javascript" src="/static/js/jquery.uploadify.js"/>

主要目的是练习KnockoutJS和Bootstrap，后台为了保持一致就用现成的NodeJS + MongoDB了。写好需要的功能，本地测试通过之后想试着布置一下，正好也可以了解Dotcloud架设这种环境的方法，网上没有现成的文档，有相关的文章，但不是用Express和Mongoskin写的，所以自己动手搭建了一个，现在把方法分享一下。 Dotcloud Configure 新建一个项目，目录结构和其他应用基本相同。忘了的话可以参考这篇架设Django的文章。根目录是kanoya-on-dotcloud，kanoya是NodeJS项目目录，目录中的文件列表如下：

kanoya-on-dotcloud/
├── kanoya
│   ├── app.js
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── supervisord.conf
│   └── views
└── dotcloud.yml

kanoya-on-dotcloud/

├── kanoya

│ ├── app.js

│ ├── node_modules

│ ├── package.json

│ ├── public

│ ├── supervisord.conf

│ └── views

└── dotcloud.yml

Perchouli 的 Blog

月份：2012年1月

Django用uploadify实现图片批量上传

在Dotcloud上搭建NodeJS+MongoDB环境