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

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

CodeIngiter简称CI,是一个php框架,从ror上学习了很多东西,CI是一个完全MVC的框架,使用它可以快速的开发出WEB应用来,使用CI的应用的基本结构如下:
 
application/models #模型存储目录 
application/views #视

CodeIngiter简称CI,是一个php框架,从ror上学习了很多东西,CI是一个完全MVC的框架,使用它可以快速的开发出WEB应用来,使用CI的应用的基本结构如下:
 
application/models #模型存储目录
application/views #视图存储目录
application/controllers #控制器存储目录
 
一个完整的CI项目的结构大致如下:

\

models目录中存储与数据库相关的php类,views中存储展现层面的php,事实上,views中的php多为HTML页面,其中嵌入一些相关的php脚本而已。控制器接受客户端请求,组织好数据(通过访问模型),然后跳转到特定的view上,整个流程基本如此。当然,CodeIgniter提供了很多便利的帮助类(helper),处理请求非常方便,比如数据库访问,URL分段,上传文件,邮件等等。使用这些帮助类,预定义模块,我们可以快速的进行WEB开发。
 
jQuery.uploadify是一个文件上传插件,有进度条控制,以及多个事件的钩子定义。比如,当上传完成之后,需要通知客户端处理的onComplete。支持多文件上传,取消上传等等控制,是一个比较全面的上传插件。更为完整的信息请参阅jquery.uploadify的官方主页。

\

最近的项目开发中,使用CI作为基础框架,但是涉及到上传部分,发现CI本身提供的不是很好用,就打算是使用uploadify,不过uploadify本身没有相关的例子。找了很长时间,好不容易调试通过一个,就整理整理吧。
 
在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,然后默认的方法为index,我们在浏览器访问该控制器的时候,URL即为:http://localhost/pc/upload,可以看到index方法的内容为加载upload/view这个视图。我们再来看看view这个视图的内容:

<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>


当然,这里只是注册完成,还需要绑定触发事件,当点击一个link的时候,开始上传:

<?php echo form_open_multipart('upload/index');?>
 <label for="Filedata">选择一个文件</label><br/>
 <?php echo form_upload(array('name' => 'Filedata', 'id' => 'upload'));?>
 <a href="javascript:$('#upload').uploadifyUpload();">上传文件</a>
<?php echo form_close();?>

点击这里的上传文件之后,就可以上传文件至服务器端的/uploads文件夹下,当完成之后,由于我们此处注册了onComplete函数,因此会回调alert("文件上传成功"+flieObj.filePath),当然出错的话会根据状态码返回不同的错误信息,因为我们这里注册了onError事件处理器。

源代码下载地址:http://vdisk.weibo.com/s/pGpma (微盘)

 

赞助商链接: