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

来源：互联网发布：御剑神兵backbone.js 编辑：程序博客网时间：2024/04/28 20:08

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代码如下：

<?phpclass 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 0