在CodeIngiter加入jQuery.uploadify上傳的方法

2013-02-05 16:48:02來源:iteye作者:

CodeIngiter簡稱CI,是一個(gè)php框架,從ror上學(xué)習(xí)了很多東西,CI是一個(gè)完全MVC的框架,使用它可以快速的開發(fā)出WEB應(yīng)用來,使用CI的應(yīng)用的基本結(jié)構(gòu)如下:
 
application/models #模型存儲目錄 
application/views #視

CodeIngiter簡稱CI,是一個(gè)php框架,從ror上學(xué)習(xí)了很多東西,CI是一個(gè)完全MVC的框架,使用它可以快速的開發(fā)出WEB應(yīng)用來,使用CI的應(yīng)用的基本結(jié)構(gòu)如下:
 
application/models #模型存儲目錄
application/views #視圖存儲目錄
application/controllers #控制器存儲目錄
 
一個(gè)完整的CI項(xiàng)目的結(jié)構(gòu)大致如下:

\

models目錄中存儲與數(shù)據(jù)庫相關(guān)的php類,views中存儲展現(xiàn)層面的php,事實(shí)上,views中的php多為HTML頁面,其中嵌入一些相關(guān)的php腳本而已?刂破鹘邮芸蛻舳苏埱螅M織好數(shù)據(jù)(通過訪問模型),然后跳轉(zhuǎn)到特定的view上,整個(gè)流程基本如此。當(dāng)然,CodeIgniter提供了很多便利的幫助類(helper),處理請求非常方便,比如數(shù)據(jù)庫訪問,URL分段,上傳文件,郵件等等。使用這些幫助類,預(yù)定義模塊,我們可以快速的進(jìn)行WEB開發(fā)。
 
jQuery.uploadify是一個(gè)文件上傳插件,有進(jìn)度條控制,以及多個(gè)事件的鉤子定義。比如,當(dāng)上傳完成之后,需要通知客戶端處理的onComplete。支持多文件上傳,取消上傳等等控制,是一個(gè)比較全面的上傳插件。更為完整的信息請參閱jquery.uploadify的官方主頁。

\

最近的項(xiàng)目開發(fā)中,使用CI作為基礎(chǔ)框架,但是涉及到上傳部分,發(fā)現(xiàn)CI本身提供的不是很好用,就打算是使用uploadify,不過uploadify本身沒有相關(guān)的例子。找了很長時(shí)間,好不容易調(diào)試通過一個(gè),就整理整理吧。
 
在CI中使用uploadify

控制器部分:

<?php
class Upload extends Controller
{
 function Upload()
 {
  parent::Controller();
  $this->load->helper('form');
  $this->load->helper('url');
  $this->load->helper('json');
 }
 
 
 /*
 * Display upload form
 */
 function index()
 {
  
  $this->load->view('upload/view');
 }
 
}

CI的所有控制器需要繼承Controller,然后默認(rèn)的方法為index,我們在瀏覽器訪問該控制器的時(shí)候,URL即為:http://localhost/pc/upload,可以看到index方法的內(nèi)容為加載upload/view這個(gè)視圖。我們再來看看view這個(gè)視圖的內(nèi)容:

<script type="text/javascript" language="javascript">
 $(document).ready(function(){    
  $("#upload").uploadify({
   uploader: '<?php echo base_url();?>resource/uploadify.swf',
   script: '<?php echo base_url();?>script/uploadify.php',
   buttonImg: '<?php echo base_url();?>resoure/browser.png',
   cancelImg: '<?php echo base_url();?>resoure/cancel.png',
   folder: '/uploads',
   scriptAccess: 'always',
   multi: true,
   'onError' : function (a, b, c, d) {
     if (d.status == 404){
     alert('找不到文件');
     }else if (d.type === "HTTP"){
     alert('error '+d.type+": "+d.status);
     }else if (d.type ==="File Size"){
     alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
     }else{
     alert('error '+d.type+": "+d.text);
     }
    },
   'onComplete'   : function (event, queueID, fileObj, response, data) {
    alert("文件上傳成功:"+fileObj.filePath);  
   }
  });
 });
</script>


當(dāng)然,這里只是注冊完成,還需要綁定觸發(fā)事件,當(dāng)點(diǎn)擊一個(gè)link的時(shí)候,開始上傳:

<?php echo form_open_multipart('upload/index');?>
 <label for="Filedata">選擇一個(gè)文件</label><br/>
 <?php echo form_upload(array('name' => 'Filedata', 'id' => 'upload'));?>
 <a href="javascript:$('#upload').uploadifyUpload();">上傳文件</a>
<?php echo form_close();?>

點(diǎn)擊這里的上傳文件之后,就可以上傳文件至服務(wù)器端的/uploads文件夾下,當(dāng)完成之后,由于我們此處注冊了onComplete函數(shù),因此會(huì)回調(diào)alert("文件上傳成功"+flieObj.filePath),當(dāng)然出錯(cuò)的話會(huì)根據(jù)狀態(tài)碼返回不同的錯(cuò)誤信息,因?yàn)槲覀冞@里注冊了onError事件處理器。

源代碼下載地址:http://vdisk.weibo.com/s/pGpma (微盤)

 

關(guān)鍵詞:CodeIngitercijQueryuploadify

贊助商鏈接: