CI框架怎么使用ajax方式无刷新上传文件/图片

Codeigniter是一个很强大的php框架,但是很多初学者都有一个问题,就是怎样在CI里应用Ajax技术,如果解决了这个问题,用CI来开发网站或APP后台就显得相当自由。首先,学了CI都知道MVC(模型-视图-控制器),M主要是处理数据(说白就是对数据存取删改),V主要是视图模板(其实就是用户界面),C主要是将后台的数据传送到V或者将用户在V上操作的数据传送到M(前后端桥梁/数据搬运工)。这个刚开始看起来有点绕,不过你再仔细看多几遍,理解之后就发现MVC不是什么高大上的东西,无非就是众多设计模式中的最简单的一种之一。


那Ajax是什么,这个我懒得详细讲了,简单来说,就是浏览器(客户端)有一个对象,这个对象呢会乖乖听你的命令在特定时候向后台(服务器)请求数据,那么服务器得知对象的请求后赶紧返回请求的数据,当对象接受到服务器的数据后,又会根据你的命令来将数据以某种美观的方式展现出来。这个不是很绕了吧。现在再来细说一下,浏览器的这个对象,可以理解为视图,而服务器响应请求的过程是控制器和模型在工作。看到这句话,你有没有想到一点什么?没错,在CI里运用Ajax时一般不需要加载视图,也就是说,你只需要专心地写好控制器和模型来完成后台的核心功能,然后静静地等前端开发用get或post来请求你写的API(URL)就行了。


看到这里,你知道要实现无刷新上传文件需要学习什么技术了吧。首先,要懂ajax,懂ajax的前提是熟悉js,熟悉js前提是熟练html和css;其次,要懂后台语言,了解http协议,明白为什么能接受到文件和保存文件的原理等等。是不是很累!如果你不像所有东西都自己学会之后再写一套解决方案出来,那么你可以并且能快速学会CI框架和接下来我要推荐的一个jquery上传插件——uploadify,通过codeigniter和uploadify配合可以实现一个简单、快速、美观的无刷新异步上传文件。


uploadify官网http://www.uploadify.com/


我默认你已经配置好并使用着CI框架,那么我只提供uploadify的官网地址,里面有详细的文档教程(英文版,其实不用看英语直接看代码就能看懂的)和下载地址。当你下载完成后,解压到CI的根目录的新建的uploadify文件夹里面,然后再新建一个uploads文件夹作为上传的文件夹。


打开编辑器,新建一个upload.html网页,保存于uploadify文件夹。

upload.html代码如下:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>UploadiFive Test</title>

	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.uploadify.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="uploadify.css">
</head>

<body>
	<form>
		<input id="file_upload" name="userfile" type="file" multiple="true">
	</form>

	<script type="text/javascript">
		$(function() {
			$('#file_upload').uploadify({
				'swf'			:	'uploadify.swf',
				'uploader'	:	'/index.php/upload/do_upload',
				'fileObjName'	:	'userfile',
				'buttonText'	:	'选择图片',
				'removeTimeout'	:	5,

				'onUploadSuccess' : function(file, data, response) {
					alert(data);
		                },

				'onUploadError' : function(file, errorCode, errorMsg, errorString) {
		                        alert(errorString);
		                }
			});
		});
	</script>
</body>
</html>
(注意uploadify官网下载的文件里面不包括jquery.js,所以请另外下载或者使用国内的CDN)


接着,再新建一个CI控制器Upload.php,保存于哪里不用说了吧(如果不会CI的先别急着看这篇文章,先把CI学会,再研究更深层次的东西,磨刀不误砍柴工)。

Upload.php代码如下:

<?php
class Upload extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
    }

    public function do_upload()
    {
        //上传配置
        $config['upload_path']      = './uploads/';
        $config['allowed_types']    = 'gif|jpg|png';
        $config['max_size']     = 100000;

        //加载上传类
        $this->load->library('upload', $config);

        //执行上传任务
        if($this->upload->do_upload('userfile')){
            echo '上传成功';  //如果上传成功返回成功信息
        }
        else{
            echo '上传失败,请重试'; //如果上传失败返回错误信息
        }
    }
}


好了,很简单的两个代码,现在在浏览器地址栏输入运行 localhost/uploadify/upload.html 就可以看到页面了


然后选择图片点确定就能上传到uploads文件夹了。这个蓝色按钮是我改了uploadify.css样式后的效果,默认是椭圆灰色按钮,所以根据你的需要来修改。


可能上面那两段代码有点难理解,我来简单解释一下:


1、这三句是将uploadify插件依赖的代码包含进来。

        <script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.uploadify.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="uploadify.css">

2、这一段是实例化uploadify,官方文档有详细说明。其中,uploader是服务器的地址(在这里是CI写的API,调用upload控制器的do_upload函数);onUploadSuccess函数是文件上传成功后调用的函数,参数data是API返回的值(do_upload函数最后不是return 值,而是echo 值,将echo的值传给data);同理,onUploadSuccess函数是上传失败函数,后台echo的值传给errorString。

               $(function() {
			$('#file_upload').uploadify({
				'swf'			:	'uploadify.swf',
				'uploader'	:	'/index.php/upload/do_upload',
				'fileObjName'	:	'userfile',
				'buttonText'	:	'选择图片',
				'removeTimeout'	:	5,

				'onUploadSuccess' : function(file, data, response) {
					alert(data);
		                },

				'onUploadError' : function(file, errorCode, errorMsg, errorString) {
		                        alert(errorString);
		                }
			 });
		});


3、do_upload函数的注释已经讲得很清楚,所以联合以上两点不难理解uploadify的用法。


uploadify在CI的用法已经讲完了,我也要去吃晚饭了,最后再说一点:无刷新异步上传文件的方式还有很多很多,比如使用H5的base64方法,将图片转化为数据流的方式传送到服务器;比如使用flash上传,可以开发出很好的上传体验;比如iframe伪ajax也能实现同样的效果;再比如像uploadify这种方式使用jquery插件方式来解决兼容性问题等等。不管什么方式,大多都只是在视图部分实现,而服务器端代码几乎不变。这样对比来看,前端发展得越来越好,五花八门,各显神通,各种插件、框架层出不穷,所以我认为,PHPer不应该还待在舒服区域,应该去接触更多的前端知识,学习服务器端的新崛起的对手node.js,来开发数据交互更好的后台。


 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值