Codeigniter里的无刷新上传的实现代码

2023-08-24 15:24:16 315

好久没有更新了，写点吧算是翻译吧，纯原创没空啊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();
}

嗯，简单的应用。没有涉及的权限、上传的进度条等。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Codeigniter里的无刷新上传的实现代码

UploadFile

Files

热门推荐

随机推荐