Django 用 uploadify 实现图片批量上传
openkk
13年前
分享一下在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} 添加一个上传按钮，引入相应的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"/>
需要在两个函数，一个用来检查图片是否存在，一个用来保存图片。
@csrf_exempt def check_existing(request): #如果调用Django的Field来处理会自动判断 #常见的操作是用户上传图片后随机给一个名字 #所以这里也可以直接返回0，即不存在 return HttpResponse('0') ''' 用来处理的上传图片。如果这个函数独立存在的话，它的request.user 是匿名用户，request.session也和当前登录的用户不同。简单的解决 方法是接传入user_id ''' @csrf_exempt def upload_image(request, user_id): file_ext = str(request.FILES['Filedata'].name).split('.')[-1] # 随机或者md5加密或者其他方式，让图片名字不重复 file_name = time.strftime('%Y%m%d%H%M%S') user_upload_folder = os.path.join('media', user_id) if not os.path.exists(user_upload_folder): os.mkdir(user_upload_folder) #这里是用二进制的方式操作，Django也提供了其他的方法 file_upload = open( os.path.join(user_upload_folder, file_name+'.'+file_ext), 'w') file_upload.write(request.FILES['Filedata'].read()) file_upload.close() return HttpResponse(file_name+'.'+file_ext) 在url中增加对这两个函数的指向，最后用js初始化上传按钮：
$(document).ready(function(){ //批量上传按钮 $('#id_upload').uploadify ({ 'swf' : '/static/uploadify.swf', 'uploader' : '{%url upload_image request.user.id %}', 'cancelImage' : '/static/images/icons/cancel.png', 'buttonClass' : 'btn', 'checkExisting' : '{%url check_existing %}', 'removeCompleted': true, 'fileTypeExts' : '*.jpg;*.gif;*.png', 'multi' : true, 'auto' : true, 'buttonText': '添加图片', 'onUploadSuccess' : function (file, data, response) { $("#instructions").before("<img src='/media/{{request.user.id}}/"+data+"' />") } }); }) onUploadSuccess函数中，返回的file是一个object，保存有文件的信息，data是处理完成后服务器端返回的内容，response是true。