CodeIgniter与jQuery.Uploadify的结合

CodeIngiter及jQuery.uploadify简介

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事件处理器。

评论

3 楼 alan.hee 2010-06-17  

<a href="javascript:$('#upload').uploadifyUpload();"> 上传文件</a> 

看了，一直是preventDefault() 。。。原来还可以这样呀。。。

2 楼 kjj 2010-06-01  

java版很好,按钮文字可以通过重新编译fla做到!!

1 楼 sarin 2010-06-01  

给个java版的传送门http://sarin.iteye.com/blog/489372