PythonTip >> 博文 >> 基础与入门

Django的Ajax实现之文件上传

zihua 2013-10-10 16:10:23 点击: 3100 | 收藏


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://pythoner.org/wiki/59/

作者:zihua | 分类: 基础与入门 | 标签: 基础与入门 | 阅读: 3100 | 发布于: 2013-10-10 16时 |