Codeigniter里的无刷新上传
好久没有更新了,写点吧算是翻译吧,纯原创没空啊XD
Codeigniter还是很好用的,淡水一直很推崇。说是codeigniter里的无刷新上传吧,fashion 一点的说法就是利用AJAX技术上传。其中用到了Jquery和 AjaxFileUpload 。
先建个表
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`filename` VARCHAR(255) NOT NULL,
`title` VARCHAR(100) NOT NULL
);
文件的目录结构如下:
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的视图。如下:
{
public function __construct()
{
parent::__construct();
$this->load->model('files_model');
$this->load->database();
$this->load->helper('url');
}
public function index()
{
$this->load->view('upload');
}
}
我们已经在构造里加载了files_model,所以可以使用files_model里的方法。
建立表单视图
视图文件upload.php,包含了我们的上传表单。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo base_url()?>js/site.js"></script>
<script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
<link href="<?php echo base_url()?>css/style.css" rel="stylesheet" />
</head>
<body>
<h1>Upload File</h1>
<form method="post" action="" id="upload_file">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="" />
<label for="userfile">File</label>
<input type="file" name="userfile" id="userfile" size="20" />
<input type="submit" name="submit" id="submit" />
</form>
<h2>Files</h2>
<div id="files"></div>
</body>
</html>
我们在文件开始就加载了jquery,ajaxfileupload和我们自己的site.js文件。Id为files的div是我们显示上传文件列表用的。
一些简单的css
在css下建立style.css
h2 { font-size: 20px; }
label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
input[type="file"] { padding-left: 0; }
input[type="submit"] { width: auto; }
#files { font-family: Verdana, sans-serif; font-size: 11px; }
#files strong { font-size: 13px; }
#files a { float: right; margin: 0 0 5px 10px; }
#files ul { list-style: none; padding-left: 0; }
#files li { width: 280px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #CCC; }
第二步,Javascript
在js下建立site.js
$('#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('<p>Reloading files...</p>');
refresh_files();
$('#title').val('');
}
alert(data.msg);
}
});
return false;
});
});
Javascript劫持了表单的提交,并由ajaxfileupload接管。其实是在后台创建了一个iframe并提交了数据。
我只是ajax提交了#title的值,可以通过参数提交更多的字段。
检查返回的json数据,如果没有错误,就刷新文件列表(下文有),清除title字段。不管怎样,都alert出返回的数据。
第三步,上传文件
控制器部分
现在开始上传文件了。我们的URL是这样的 /uplaod/upload_file/,所以,我们在uoload的控制器里建立upload_file方法。
{
$status = "";
$msg = "";
$file_element_name = 'userfile';
if (empty($_POST['title']))
{
$status = "error";
$msg = "Please enter a title";
}
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 = "File successfully uploaded";
}
else
{
unlink($data['full_path']);
$status = "error";
$msg = "Something went wrong when saving the file, please try again.";
}
}
@unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
我们对title字段做了个简单的数据检查,看看他是否为空。不为空就加载codeigniter的upload库。这个类库为我们处理了很多的数据验证。
接着,我们上传文件了。如果成功我们保存title和file_name。然后我们删除了临时文件,最后,json方法返回了状态和信息,来告诉我们结果。
模型部分
按大多数人的MVC模式理念,我们应该在模型里处理数据库交换。
建立files_model.php
public function insert_file($filename, $title)
{
$data = array(
'filename' => $filename,
'title' => $title
);
$this->db->insert('files', $data);
return $this->db->insert_id();
}
}
保存上传文件的文件夹
不要忘记在根目录建立个files文件夹,并给他写入权限。
第四步,文件列表
成功上传后,我们需要更新文件列表,方便修改。
Javascript部分
打开site.js,在后面追加:
{
$.get('./upload/files/')
.success(function (data){
$('#files').html(data);
});
}
Jquery的简单应用。Ajax取得指定url的内容,填充到#files的div里。
控制器部分
不多说了。
{
$files = $this->files_model->get_files();
$this->load->view('files', array('files' => $files));
}
调用模型的方法取得数据,再加载到files视图里显示。
模型部分
{
return $this->db->select()
->from('files')
->get()
->result();
}
视图部分
新建files.php视图
if (isset($files) && count($files))
{
?>
<ul>
<?php
foreach ($files as $file)
{
?>
<li class="image_wrap">
<a href="#" class="delete_file_link" data-file_id="<?php echo $file->id?>">Delete</a>
<strong><?php echo $file->title?></strong>
<br />
<?php echo $file->filename?>
</li>
<?php
}
?>
</ul>
</form>
<?php
}
else
{
?>
<p>No Files Uploaded</p>
<?php
}
?>
删除文件
Javascript部分
e.preventDefault();
if (confirm('Are you sure you want to delete this file?'))
{
var link = $(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('<p>No Files Uploaded</p>');
}
});
}
else
{
alert(data.msg);
}
}
});
}
});
控制器部分
{
if ($this->files_model->delete_file($file_id))
{
$status = 'success';
$msg = 'File successfully deleted';
}
else
{
$status = 'error';
$msg = 'Something went wrong when deleteing the file, please try again';
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
模型部分
{
$file = $this->get_file($file_id);
if (!$this->db->where('id', $file_id)->delete('files'))
{
return FALSE;
}
unlink('./files/' . $file->filename);
return TRUE;
}
public function get_file($file_id)
{
return $this->db->select()
->from('files')
->where('id', $file_id)
->get()
->row();
}
嗯,简单的应用。没有涉及的权限、上传的进度条等。
建议继续学习:
- QQ上传大文件为什么这么快 (阅读:12360)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7751)
- 解决securecrt rz 上传rar,gif文件不正确问题 (阅读:7078)
- Codeigniter ACL library (阅读:5308)
- PHP上传进度条深度解析 (阅读:4874)
- PHP上传文件类型彻底判断方案及PHP+nginx上传大小彻底控制方案 (阅读:3824)
- PHP JAVA C上传文件如何准确判断文件类型-mime知识普及 (阅读:3540)
- 渐进增强的无刷新多图片上传控件(iFrame+HTML5) (阅读:3426)
- PHP文件上传源码分析(RFC1867) (阅读:3333)
- php_admin_value open_basedir 引起的上传文件失败解决方法 (阅读:3308)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:淡水河边 来源: 淡水河边的博客
- 标签: Codeigniter 上传 刷新
- 发布时间:2011-09-15 23:47:35
- [66] Oracle MTS模式下 进程地址与会话信
- [66] Go Reflect 性能
- [65] 如何拿下简短的域名
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则