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文件里了。

需要在两个函数，一个用来检查图片是否存在，一个用来保存图片。

@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。

Django 用 uploadify 实现图片批量上传相关推荐

ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
Android 图片批量上传,移动端图片批量上传问题
一.操作系统 1.ios ios的操作系统: 实现图片批量上传,可以直接使用input type=file 加上multiple 就可以实现,至于有些图片显示有问题可以通过 new FileRead ...
分享一个图片管理程序,图片批量上传,图片管理(有图片)
呵呵,好久没写博客了.今天在此奉上一篇! 关于图片管理,其实做项目很多地方都用到图片管理. 比如:产品图片,新闻图片,作品图片. 现分享一篇关于图片管理的文章,希望大家能用得上. 先来看效果图吧: 上 ...
php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
JCK Editor 结合jQuery Upload File 增加图片批量上传功能
项目需准备文件: jQuery File Upload 上传插件,下载地址:https://github.com/JennerZhang/jQuery-File-Upload Joomla JFUpl ...
php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...
解决KindEditor无法安装flash插件实现图片批量上传
由于现在无法下载使用flash插件,导致KindEditor有的功能丧失,无法使用,本文主要解决图片无法批量上传的问题. 由于公司项目是混编项目,比较老旧且业务复杂,使用KindEditor的地方较多 ...
jQuery图片批量上传插件
下载地址 jQuery图片批量上传网页插件,可以实现上传图片预览拖拽排序,编辑图片功能支持多个多图上传功能特效. dd:

Django 用 uploadify 实现图片批量上传

Django 用 uploadify 实现图片批量上传相关推荐

最新文章

热门文章