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,來存放上傳的圖片。
前端樣式指令碼引用代碼: 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>
引用檔案的路徑算是很重要,具體靜態配置決定這些。首先引用Uploadify的樣式檔案,然後就是先引用JQuery類庫,再引用Uploadify自身指令碼swfobject.js和jquery.uploadify.v2.1.4.min.js
Uploadify組件初始化代碼: 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,//設定可以上傳多個檔案 'queueSizeLimit':20,//設定可以同時20個檔案 'removeCompleted':false,// 'sizeLimit':10240000,//設定上傳檔案大小單位kb 'fileExt':'*.jpg;*.gif;*.png',//設定上傳檔案類型為常用圖片格式 'fileDesc':'Image Files', 'onInit': function () {}, 'onError' : function (event,ID,fileObj,errorObj) { $('#id_span_msg').html("上傳失敗,錯誤碼:"+errorObj.type+" "+errorObj.info); }, 'onSelect': function (e, queueId, fileObj) { $('#id_span_msg').html(""); }, 'onAllComplete'