欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

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

星期日, 2016-09-11 14:10 — adminshiping1
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代码如下:

 

[html] view plain copy
 
 print?
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.     <title>UploadiFive Test</title>  
  6.   
  7.     <script src="jquery.js" type="text/javascript"></script>  
  8.     <script src="jquery.uploadify.min.js" type="text/javascript"></script>  
  9.     <link rel="stylesheet" type="text/css" href="uploadify.css">  
  10. </head>  
  11.   
  12. <body>  
  13.     <form>  
  14.         <input id="file_upload" name="userfile" type="file" multiple="true">  
  15.     </form>  
  16.   
  17.     <script type="text/javascript">  
  18.         $(function() {  
  19.             $('#file_upload').uploadify({  
  20.                 'swf'           :   'uploadify.swf',  
  21.                 'uploader'  :   '/index.php/upload/do_upload',  
  22.                 'fileObjName'   :   'userfile',  
  23.                 'buttonText'    :   '选择图片',  
  24.                 'removeTimeout' :   5,  
  25.   
  26.                 'onUploadSuccess' : function(file, data, response) {  
  27.                     alert(data);  
  28.                         },  
  29.   
  30.                 'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
  31.                                 alert(errorString);  
  32.                         }  
  33.             });  
  34.         });  
  35.     </script>  
  36. </body>  
  37. </html>  
（注意uploadify官网下载的文件里面不包括jquery.js，所以请另外下载或者使用国内的CDN）

 

 

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

Upload.php代码如下：

 

[php] view plain copy
 
 print?
  1. <?php  
  2. class Upload extends CI_Controller {  
  3.   
  4.     public function __construct()  
  5.     {  
  6.         parent::__construct();  
  7.     }  
  8.   
  9.     public function do_upload()  
  10.     {  
  11.         //上传配置  
  12.         $config['upload_path']      = './uploads/';  
  13.         $config['allowed_types']    = 'gif|jpg|png';  
  14.         $config['max_size']     = 100000;  
  15.   
  16.         //加载上传类  
  17.         $this->load->library('upload', $config);  
  18.   
  19.         //执行上传任务  
  20.         if($this->upload->do_upload('userfile')){  
  21.             echo '上传成功';  //如果上传成功返回成功信息  
  22.         }  
  23.         else{  
  24.             echo '上传失败，请重试'; //如果上传失败返回错误信息  
  25.         }  
  26.     }  
  27. }  

 

 

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

 

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

 

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

 

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

 

[html] view plain copy
 
 print?
  1.        <script src="jquery.js" type="text/javascript"></script>  
  2. <script src="jquery.uploadify.min.js" type="text/javascript"></script>  
  3. <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。

 

[html] view plain copy
 
 print?
  1.              $(function() {  
  2.     $('#file_upload').uploadify({  
  3.         'swf'           :   'uploadify.swf',  
  4.         'uploader'  :   '/index.php/upload/do_upload',  
  5.         'fileObjName'   :   'userfile',  
  6.         'buttonText'    :   '选择图片',  
  7.         'removeTimeout' :   5,  
  8.   
  9.         'onUploadSuccess' : function(file, data, response) {  
  10.             alert(data);  
  11.                 },  
  12.   
  13.         'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
  14.                         alert(errorString);  
  15.                 }  
  16.      });  
  17. });  

 

 

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

 

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

来自 http://blog.csdn.net/a727911438/article/details/51932963

普通分类: 
ci
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2