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。

文章出處：http://dmyz.org/archives/350