Django's Ajax implementation of file upload __ajax

Uploadify component Upload file is cool, can achieve file progress upload, and can upload various files in bulk. There are many benefits, please visit the official website to see the documentation. In the same class of components, Uploadify is doing a great job. It's easy to use it in Django and two things together, but some details need to be written down for later reuse.

This time only said upload picture part, as to upload a file, actually can Tiger, and come will be simple, just Python program back-end writing difference only, front-end code uploadify equal treatment, picture is a special case of file.

Django uses the Uploadify component to upload a picture, which can be divided into two major steps.
One: The front end references the class library and script styles required by uploadify.
Uploadify will use the JQuery class library, as well as its own several scripts and style files, with the Django static files, so that Django correctly parse the static files, even if half the success, static file configuration reference to the previous blog: "Django static file configuration."

Static files We store in the root directory Site_media folder, to the official website http://www.uploadify.com/download Uploadify-2.14 components, placed under Site_media plugin, Random name: uploadify_214, and then create a new file under Upload, to store uploaded images.

Front-end style script reference code: View Plain print? <link href= "/site_media/plugin/uploadify_214/uploadify.css" type= "Text/css" rel= "stylesheet"/> <script Type= "Text/javascript" src= "/site_media/js/jquery.js" ></script> <script type= "Text/javascript" src= "/ Site_media/plugin/uploadify_214/swfobject.js "></script> <script type=" Text/javascript "src="/site_ Media/plugin/uploadify_214/jquery.uploadify.v2.1.4.min.js "></script>

It is important to refer to the path of the file, which is determined by the specific static configuration. First refer to the Uploadify style file, then refer to the JQuery Class library first, and then refer to uploadify own script swfobject.js and Jquery.uploadify.v2.1.4.min.js

Uploadify Component Initialization code: View plain print? <script type= "Text/javascript" >   $ (document). Ready (function ()  {      $ (' #file_upload '). Uploadify ({        ' uploader '   :  '/site_ media/plugin/uploadify_214/uploadify.swf ',        ' script '      :  ' {%url uploadify_script%} ',        ' cancelimg '  :  '/site_ Media/plugin/uploadify_214/cancel.png ',        ' folder '     :   '/upload ',        ' auto '       : false,//         ' multi ':  true,//settings can upload multiple files         ' Queuesizelimit ': 20,//settings can be 20 files at a time         ' removecompleted ':false,//        ' sizeLimit ': 10240000,//set upload file size unit kb      &nbsP; ' Fileext ': ' *.jpg;*.gif;*.png ',//Set upload file type for common image format         ' filedesc ': ' image  Files ',                         ' OnInit ': function  ()  {},        ' OnError '  : function  (event,id,fileobj,errorobj)  {                $ (' #id_span_msg '). html ("Upload failed, error code:" +errorobj.type+ " " + Errorobj.info);           },         ' OnSelect ': function  (e, queueid, fileobj)  {            $ (' #id_span_msg '). HTML ("");       },        ' Onallcomplete '