Python Tech

Django用uploadify实现图片批量上传

分享一下在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。

avatar

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

  Subscribe  
最新 最旧 得票最多
提醒
Jason
游客
Jason

报HTTP 500错误。’uploader’ : ‘{%url upload_image request.user.id %}’, 这个地方,因为有参数,所以没办法直接这样写,所以我改成’myinfo/upload_image/{{ request.user.id }}’

Jason
游客
Jason

报HTTP 500错误。’uploader’ : ‘{%url upload_image request.user.id %}’, 这个地方,因为有参数,所以没办法直接这样写,所以我改成’myinfo/upload_image/{{ request.user.id }}’

trackback

[…] 之前写过Django用uploadify实现图片批量上传,从反馈来看,问题很多。现在uploadify更新到了3.2版,仍然是用swf来实现批量上传,代码还是老样子一团糟。作为替代换成了file-uploader,虽然是multipart/form-data来实现批量上传,不如swf的方式通用。但我不需要兼容老版本浏览器,做的都是富js应用,更看重代码的可扩展性,file-uploader更合适。 […]

trackback

[…] FROM:http://dmyz.org/archives/350 […]