分享一下在Django中使用uploadify——一個(gè)jQuery批量上傳插件——的方法。github上的django-uploadify使用的是2.1.4版本，上傳button只能使用圖片，不能很方便的修改樣式。本文針對(duì)的是uploadify 3.0.0版本。
uploadify可以結(jié)合Django自身的ImageField，或是配合easy_thumbnails等第三方app來使用。比較穩(wěn)定，我 在幾個(gè)項(xiàng)目中處理批量上傳都是用它，沒有出現(xiàn)什么問題。但因?yàn)槭怯胒lash上傳，在開發(fā)工具中監(jiān)控不到network的動(dòng)作，只能通過函數(shù)返回的錯(cuò)誤信 息來調(diào)試，所以比較麻煩，但調(diào)通一次就一勞永逸了。
不重要的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}
添加一個(gè)上傳按鈕，引入相應(yīng)的js文件。uploadify 3.0中把swfobject.js和uploadify.js寫到一個(gè)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"/>需要在兩個(gè)函數(shù)，一個(gè)用來檢查圖片是否存在，一個(gè)用來保存圖片。
@csrf_exemptdef check_existing(request): ? ?? ? #如果調(diào)用Django的Field來處理會(huì)自動(dòng)判斷? ? #常見的操作是用戶上傳圖片后隨機(jī)給一個(gè)名字? ? #所以這里也可以直接返回0，即不存在return HttpResponse('0')'''用來處理的上傳圖片。如果這個(gè)函數(shù)獨(dú)立存在的話，它的request.user是匿名用戶，request.session也和當(dāng)前登錄的用戶不同。簡(jiǎn)單的解決方法是接傳入user_id'''@csrf_exemptdef upload_image(request, user_id):file_ext = str(request.FILES['Filedata'].name).split('.')[-1]? ? # 隨機(jī)或者md5加密或者其他方式，讓圖片名字不重復(fù)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)? ? #這里是用二進(jìn)制的方式操作，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中增加對(duì)這兩個(gè)函數(shù)的指向，最后用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函數(shù)中，返回的file是一個(gè)object，保存有文件的信息，data是處理完成后服務(wù)器端返回的內(nèi)容，response是true。

總結(jié)

以上是生活随笔為你收集整理的Django 用 uploadify 实现图片批量上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。