Codeigniter里的无刷新上传的实现代码
好久没有更新了,写点吧算是翻译吧,纯原创没空啊XD
Codeigniter还是很好用的,淡水一直很推崇。说是codeigniter里的无刷新上传吧,fashion一点的说法就是利用AJAX技术上传。其中用到了Jquery和AjaxFileUpload。
先建个表
CREATETABLE`files`( `id`INTNOTNULLAUTO_INCREMENTPRIMARYKEY, `filename`VARCHAR(255)NOTNULL, `title`VARCHAR(100)NOTNULL );
文件的目录结构如下:
public_html/ -application/ ―-controllers/ ――upload.php ―-models/ ――files_model.php ―-views/ ――upload.php ――files.php -css/ ―-style.css -files/ -js/ ―-AjaxFileUpload.js ―-site.js
第一步,建立表单
看上去就一个title文本字段,一个文件框,一个提交按钮,还有一个files的div。
控制器部分
首先,我们要建一个上传的表单和一个upload的Controller。在index方法里渲出upload的视图。如下:
classUploadextendsCI_Controller { publicfunction__construct() { parent::__construct(); $this->load->model('files_model'); $this->load->database(); $this->load->helper('url'); } publicfunctionindex() { $this->load->view('upload'); } }
我们已经在构造里加载了files_model,所以可以使用files_model里的方法。
建立表单视图
视图文件upload.php,包含了我们的上传表单。
js/site.js"> js/ajaxfileupload.js"> css/style.css"rel="externalnofollow"rel="stylesheet"/> UploadFile
Title File Files
我们在文件开始就加载了jquery,ajaxfileupload和我们自己的site.js文件。Id为files的div是我们显示上传文件列表用的。
一些简单的css
在css下建立style.css
h1,h2{font-family:Arial,sans-serif;font-size:25px;} h2{font-size:20px;} label{font-family:Verdana,sans-serif;font-size:12px;display:block;} input{padding:3px5px;width:250px;margin:0010px;} input[type="file"]{padding-left:0;} input[type="submit"]{width:auto;} #files{font-family:Verdana,sans-serif;font-size:11px;} #filesstrong{font-size:13px;} #filesa{float:right;margin:005px10px;} #filesul{list-style:none;padding-left:0;} #filesli{width:280px;font-size:12px;padding:5px0;border-bottom:1pxsolid#CCC;}
第二步,Javascript
在js下建立site.js
$(function(){ $('#upload_file').submit(function(e){ e.preventDefault(); $.ajaxFileUpload({ url:'./upload/upload_file/', secureuri:false, fileElementId:'userfile', dataType:'json', data:{ 'title':$('#title').val() }, success:function(data,status) { if(data.status!='error') { $('#files').html('Reloadingfiles...
'); refresh_files(); $('#title').val(''); } alert(data.msg); } }); returnfalse; }); });
Javascript劫持了表单的提交,并由ajaxfileupload接管。其实是在后台创建了一个iframe并提交了数据。
我只是ajax提交了#title的值,可以通过参数提交更多的字段。
检查返回的json数据,如果没有错误,就刷新文件列表(下文有),清除title字段。不管怎样,都alert出返回的数据。
第三步,上传文件
控制器部分
现在开始上传文件了。我们的URL是这样的/uplaod/upload_file/,所以,我们在uoload的控制器里建立upload_file方法。
publicfunctionupload_file() { $status=""; $msg=""; $file_element_name='userfile'; if(empty($_POST['title'])) { $status="error"; $msg="Pleaseenteratitle"; } if($status!="error") { $config['upload_path']='./files/'; $config['allowed_types']='gif|jpg|png|doc|txt'; $config['max_size']=1024*8; $config['encrypt_name']=TRUE; $this->load->library('upload',$config); if(!$this->upload->do_upload($file_element_name)) { $status='error'; $msg=$this->upload->display_errors('',''); } else { $data=$this->upload->data(); $file_id=$this->files_model->insert_file($data['file_name'],$_POST['title']); if($file_id) { $status="success"; $msg="Filesuccessfullyuploaded"; } else { unlink($data['full_path']); $status="error"; $msg="Somethingwentwrongwhensavingthefile,pleasetryagain."; } } @unlink($_FILES[$file_element_name]); } echojson_encode(array('status'=>$status,'msg'=>$msg)); }
我们对title字段做了个简单的数据检查,看看他是否为空。不为空就加载codeigniter的upload库。这个类库为我们处理了很多的数据验证。
接着,我们上传文件了。如果成功我们保存title和file_name。然后我们删除了临时文件,最后,json方法返回了状态和信息,来告诉我们结果。
模型部分
按大多数人的MVC模式理念,我们应该在模型里处理数据库交换。
建立files_model.php
classFiles_ModelextendsCI_Model{ publicfunctioninsert_file($filename,$title) { $data=array( 'filename'=>$filename, 'title'=>$title ); $this->db->insert('files',$data); return$this->db->insert_id(); } }
保存上传文件的文件夹
不要忘记在根目录建立个files文件夹,并给他写入权限。
第四步,文件列表
成功上传后,我们需要更新文件列表,方便修改。
Javascript部分
打开site.js,在后面追加:
functionrefresh_files() { $.get('./upload/files/') .success(function(data){ $('#files').html(data); }); }
Jquery的简单应用。Ajax取得指定url的内容,填充到#files的div里。
控制器部分
不多说了。
publicfunctionfiles() { $files=$this->files_model->get_files(); $this->load->view('files',array('files'=>$files)); }
调用模型的方法取得数据,再加载到files视图里显示。
模型部分
publicfunctionget_files() { return$this->db->select() ->from('files') ->get() ->result(); }
视图部分
新建files.php视图
Delete title?> filename?>
NoFilesUploaded
删除文件
Javascript部分
$('.delete_file_link').live('click',function(e){ e.preventDefault(); if(confirm('Areyousureyouwanttodeletethisfile?')) { varlink=$(this); $.ajax({ url:'./upload/delete_file/'+link.data('file_id'), dataType:'json', success:function(data) { files=$(#files); if(data.status==="success") { link.parents('li').fadeOut('fast',function(){ $(this).remove(); if(files.find('li').length==0) { files.html('NoFilesUploaded
'); } }); } else { alert(data.msg); } } }); } });
控制器部分
publicfunctiondelete_file($file_id) { if($this->files_model->delete_file($file_id)) { $status='success'; $msg='Filesuccessfullydeleted'; } else { $status='error'; $msg='Somethingwentwrongwhendeleteingthefile,pleasetryagain'; } echojson_encode(array('status'=>$status,'msg'=>$msg)); }
模型部分
publicfunctiondelete_file($file_id) { $file=$this->get_file($file_id); if(!$this->db->where('id',$file_id)->delete('files')) { returnFALSE; } unlink('./files/'.$file->filename); returnTRUE; } publicfunctionget_file($file_id) { return$this->db->select() ->from('files') ->where('id',$file_id) ->get() ->row(); }
嗯,简单的应用。没有涉及的权限、上传的进度条等。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。