文档章节

Django使用Uploadify组件实现图片上传

岭南六少
 岭南六少
发布于 2011/08/08 23:43
字数 1445
阅读 2503
收藏 4

Uploadify组件上传文件很酷,可以实现文件进度上传,而且可以批量上传各种文件。好处还很多,具体详情登到官网看看文档了解吧。在同类组件中,Uploadify做的也很出色。打算在Django中用它,两个东西结合使用,也算简单,但有些细节需要记下来,以便以后重用。

这次只说上传图片部分,至于上传文件,其实可以照猫画虎,而且来得会简单些,只是python程序后端写法的区别而已,前端代码Uploadify一律平等对待,图片也是文件一种特例罢了。

Django使用Uploadify组件实现图片上传,可以分为两个大步骤。
一:前端引用Uploadify所需要的类库和脚本样式。
Uploadify会用到JQuery类库,还有自己的几个脚本和样式文件,搭配好了Django的静态文件,让Django正确解析静态文件,就算成功一半了,静态文件的配置参考先前的博客:《Django静态文件的配置》。

静态文件我们统一存放在根目录的site_media文件夹下,到官网http://www.uploadify.com/下载Uploadify-2.14组件,放在site_media下的plugin,随意起名:uploadify_214,再新建个文件下upload,来存放上传的图片。

前端样式脚本引用代码:

  1. <link href="/site_media/plugin/uploadify_214/uploadify.css" type="text/css" rel="stylesheet" />  
  2. <script type="text/javascript" src="/site_media/js/jquery.js"></script>  
  3. <script type="text/javascript" src="/site_media/plugin/uploadify_214/swfobject.js"></script>  
  4. <script type="text/javascript" src="/site_media/plugin/uploadify_214/jquery.uploadify.v2.1.4.min.js"></script>  
引用文件的路径算是很重要,具体静态配置决定这些。首先引用Uploadify的样式文件,然后就是先引用JQuery类库,再引用Uploadify自身脚本swfobject.js和jquery.uploadify.v2.1.4.min.js

Uploadify组件初始化代码:
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.   $('#file_upload').uploadify({  
  4.     'uploader'  : '/site_media/plugin/uploadify_214/uploadify.swf',  
  5.     'script'    : '{%url uploadify_script%}',  
  6.     'cancelImg' : '/site_media/plugin/uploadify_214/cancel.png',  
  7.     'folder'    : '/upload',  
  8.     'auto'      : false,//  
  9.     'multi'true,//设置可以上传多个文件  
  10.     'queueSizeLimit':20,//设置可以同时20个文件  
  11.     'removeCompleted':false,//  
  12.     'sizeLimit':10240000,//设置上传文件大小单位kb  
  13.     'fileExt':'*.jpg;*.gif;*.png',//设置上传文件类型为常用图片格式  
  14.     'fileDesc':'Image Files',                  
  15.     'onInit'function () {},  
  16.     'onError' : function (event,ID,fileObj,errorObj) {  
  17.             $('#id_span_msg').html("上传失败,错误码:"+errorObj.type+" "+errorObj.info);  
  18.         },  
  19.     'onSelect'function (e, queueId, fileObj) {  
  20.         $('#id_span_msg').html("");  
  21.     },  
  22.     'onAllComplete'function (event, data) {  
  23.         if(data.filesUploaded>=1){  
  24.           $('#id_span_msg').html("上传成功!");  
  25.         }                      
  26.     }                  
  27.   });  
  28. });  
  29. </script>  
初始化脚本,有几个关键的参数需要说明一下:
uploader是组件需要flash编译文件,里面封装了Uploadify核心的处理程序。
script是后端上传文件程序的url,这个是后面说的,需要自己写。
folder是上传文件的目录,这里我们不计划使用它,随便写一个充数。

前端html代码

  1. <h1>Uploadify组件上传方式</h1>  
  2. <div class="demo-box">  
  3.     <input id="file_upload" type="file" name="Filedata">  
  4.     <div id="file_uploadQueue" class="uploadifyQueue"></div>  
  5.     <p><a href="javascript:$('#file_upload').uploadifyUpload()">上传图片</a>  
  6.     <a href="javascript:$('#file_upload').uploadifyClearQueue()">取消上传</a>  
  7.     </p>  
  8.     <p><span id="id_span_msg"></span></p>  
  9. </div>  

二:写好后端图片上传的方法。
如果刚开始就把写好的上传程序和Uploadify结合,也许不是很明智的做法,因为过程中遇到问题,我们不很确定是后端程序的bug还是Uploadify的配置错误,所以建议先把写好的后端上传程序,用传统的上传方式,去测试,把程序调试好了,再和Uploadify结合,这样就会很清楚是那块出现问题了。
所以我们先写个通用的上传函数_upload,用传统的上传方式测试它,该函数:
  1. def _upload(file):  
  2.     '''''图片上传函数'''  
  3.     if file:              
  4.         path=os.path.join(settings.MEDIA_ROOT,'upload')  
  5.         file_name=str(uuid.uuid1())+".jpg"        
  6.         path_file=os.path.join(path,file_name)  
  7.         parser = ImageFile.Parser()    
  8.         for chunk in file.chunks():    
  9.             parser.feed(chunk)    
  10.         img = parser.close()  
  11.         try:  
  12.             if img.mode != "RGB":  
  13.                 img = img.convert("RGB")  
  14.             img.save(path_file, 'jpeg',quality=100)  
  15.         except:  
  16.             return False  
  17.         return True  
  18.     return False  

这个程序接收一个Files对象,在内存里处理保存好图片,程序就几行代码就不解释太多了。大体是先构造一个物理地址用于保存图片,再把内存里的图片信息存入img临时变量中,判断图片的模式,如果不是RGB,转换,保存成jpg格式,返回True,失败返回False。
该函数测试通过了,能完成保存图片的使命,最后就是写Uploadify需要的函数uploadify_script
  1. @csrf_exempt  
  2. def uploadify_script(request):  
  3.     response=HttpResponse()  
  4.     response['Content-Type']="text/javascript"  
  5.     ret="0"          
  6.     file = request.FILES.get("Filedata",None)          
  7.     if file:              
  8.         if _upload(file):  
  9.             ret="1"  
  10.         ret="2"  
  11.     response.write(ret)  
  12.     return response  

Uploadify使用uploadify_script函数,通过Get方式把图片控件的信息提交给该函数,函数返回"text/javascript"的内容类型,如果成功写入字符1,否则写入非1字符。页面的图片控件命名Filedata,Django通过file = request.FILES.get("Filedata",None)获取控件的图片信息,如果不是空的,就传递给刚才说的通用函数_upload,保存图片。


整个过程算是完结了,过程中值得注意的:
1 常常出现IO Error,如果我们已经测试_upload和uploadify_script后端程序,他们都没有错误,很多程度上是因为前端的Uploadify初始化脚本的问题,确认Uploadify几个关键的参数能不能正确解析,或者是静态文件配置没成功造成的。
2 Forbidden (403)这是Django引发的,Django1.3引进了CSRF,我们需要进行一些处理,给uploadify_script一个装饰器@csrf_exempt,记住这个很关键,很折腾人。
3 cannot write mode P as JPEG,这个是后端上传程序的错误,是因为上传了非jpg类型的图片,我们需要需要转换成RGB,再保存,上面已经提过。


好了不废话,例行给一个例子,看源码就明白了,本地浏览地址:http://127.0.0.1:8000/uploadify/

本文转载自:http://2goo.info/blog/panjj/Django/2011/08/04/527

岭南六少
粉丝 160
博文 219
码字总数 152952
作品 0
深圳
部门经理
私信 提问
加载中

评论(4)

mailwzy
mailwzy
晕死 换了个浏览器就能下了 谢谢楼主
mailwzy
mailwzy
楼主,源码下不了,能帮忙发到我邮箱么
wzy124@yahoo.cn
谢谢了
mailwzy
mailwzy
正需要呢 学习了
好难哦,模模糊糊的



http://www.cphex.cn
Django用uploadify实现图片批量上传

分享一下在Django中使用uploadify——一个jQuery批量上传插件——的方法。github上的django-uploadify使用的是2.1.4版本,上传button只能使用图片,不能很方便的修改样式。本文针对的是uploa...

红薯
2012/03/06
2.5K
2
Laravel使用Layui上传并显示图片操作

这个问题已经困扰好久了,唉 比较难受,本来学习laravel使用的是Bootstrap,之后用的是Uploadify进行上传图片,无奈,这个技术需要Flash的支持,一直没有实现,后来思考再三,还是选择用Lay...

Debug客栈
05/03
0
0
Uploadify——学习(1):在Struts2的使用

Uploadify是一个基于Jquery的文件上传组件,官网http://www.uploadify.com/可以在官网获得该组件,运行演示示例,下载帮助文档。 作为Web前端的增强技术,Jquery给用户以更好的体验和交互,增...

凡尘里的一根葱
2015/09/12
17
0
基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔《Web开发中的文件上传组件uploadify的使用》中可以看到,Asp.NET中如何使用这个组件...

walb呀
2017/12/04
0
0
IE uploadify上传图片后不显示,跪求各位大哥!

IE uploadify上传图片后不显示,求高手! 用windows-xp + tomcat6 + myeclipse8.6 写的基于struts的网站,有个上传图片功能,并在其他页面里 显示图片。 可是用IE(包括IE7,IE8)上传成功后,...

雷剑华
2014/10/30
863
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
3
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
20
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0
太全了|万字详解Docker架构原理、功能及使用

一、简介 1、了解Docker的前生LXC LXC为Linux Container的简写。可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性。相当于C++中的NameSpa...

Java技术剑
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部