Django的Ajax實現之檔案上傳__Ajax

來源:互聯網
上載者:User

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'

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.